Is it possible to deactivate the CSS hover effect using JavaScript?

Question

Is it possible to deactivate the CSS hover effect using JavaScript?

There is a parent element with an associated child element.

Right now, the child element is hidden and only appears when hovering over the parent. It vanishes when the mouse moves away from the parent due to css settings.

The goal is for the child element to remain visible even if the mouse pointer leaves the parent area, but only if the mouse button is pressed down. The hover effect should be disabled if the mouse button is clicked down and re-enabled once it is released.

This functionality is needed for a draggable feature where the handle (child element) must remain in view when dragging.

Please note that this has to be accomplished without using jquery or other external libraries.

javascript html css events

Answer 1

Answer №1

UPDATE: Oops... I missed the "without jquery" requirement... Apologies for that. I have kept my jQuery solution just in case and provided a non-jQuery alternative below.

To enable hover effect using CSS only, you can add a specific class like this:

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

For achieving the same functionality without jQuery, follow these steps:

document.querySelector(".parentElement").addEventListener("mousedown", function() {
    document.querySelector(".parentElement").classList.remove("hoverCSS");
});

document.querySelector(".parentElement").addEventListener("mouseup", function() {
    document.querySelector(".parentElement").classList.add("hoverCSS");
});

This code removes the 'hoverCSS' class on mouse down and adds it back on mouse up to control the visibility of the child element on hover of the parent.

WITHOUT JQUERY ALTERNATIVE

If you want to achieve the hover effect without any JavaScript, you can convert your parent element into a button and use the :active pseudo-class in CSS like this:

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

.parentElement.hoverCSS:hover:active {
    .childElement {
        display: block;
    }
}

By making the button active when clicked, the child element will be displayed until the button is released.

Answer 2

UPDATE: Oops... I missed the "without jquery" requirement... Apologies for that. I have kept my jQuery solution just in case and provided a non-jQuery alternative below.

To enable hover effect using CSS only, you can add a specific class like this:

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

For achieving the same functionality without jQuery, follow these steps:

document.querySelector(".parentElement").addEventListener("mousedown", function() {
    document.querySelector(".parentElement").classList.remove("hoverCSS");
});

document.querySelector(".parentElement").addEventListener("mouseup", function() {
    document.querySelector(".parentElement").classList.add("hoverCSS");
});

This code removes the 'hoverCSS' class on mouse down and adds it back on mouse up to control the visibility of the child element on hover of the parent.

WITHOUT JQUERY ALTERNATIVE

If you want to achieve the hover effect without any JavaScript, you can convert your parent element into a button and use the :active pseudo-class in CSS like this:

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

.parentElement.hoverCSS:hover:active {
    .childElement {
        display: block;
    }
}

By making the button active when clicked, the child element will be displayed until the button is released.

Is it possible to deactivate the CSS hover effect using JavaScript?

Answer №1

Similar questions

Do I need to recompile anything after making changes to a node module in my vue.js project in order for the modifications to take effect? The updates are not appearing as expected

Mastering the Art of Trimming with Jquery

How can you reposition a component within the dom using Angular?

What is the best way to save a JavaScript variable in local storage?

Personalized Map Designs for the Store Finder Plugin on WordPress

Difficulty in displaying accurate visuals for Albers US Choropleth Map using d3.js and React

Avoiding server requests in Firefox by refraining from using ajax

Display the specified div element automatically

Looking up the image directory in a JSON file on the fly - (Module not found...) React, Next.js

React - input value for creating a numerical outcome is not functioning as expected

Creating Stylish Typography with CSS3

Unsuccessful PHP conversion of numbers to words

The art of positioning headers using CSS

What is the proper way to integrate "require" into my Angular 2 project?

Identifying overflow of text or elements in JavaScript during execution

Potential 'undefined' object detected in Vuex mutation using TypeScript

Display a loading animation while the collapsible block is expanding in jQuery Mobile

Perform a sequence of test functions to display as individual tests on BrowserStack

Harvest Data from JSON Data Structure

Tips on increasing the height of an element that is overflowing