No hover color after javascript used once

add class on mouseover javascript
css text hover effects
jquery hover
button hover css
bootstrap hover
jquery hover out
jquery hover not working
jquery hover effects on div

JS Fiddle: https://jsfiddle.net/q3ahefdg/2/

If you hover before clicking on "Capitol 1" you will see the background color changing, but after you show and then hide the elements, if you hover again over "Capitol 1" you won't see the color changing.

How can I make the color change after clicking (like before) ?

function functie() {
    var x = document.getElementById("Elemente");
    if (x.style.display === "none") {
        document.getElementById("Buton1").style.backgroundColor = "rgb(132, 197, 232)";
        x.style.display = "block";
    } else {
        document.getElementById("Buton1").style.backgroundColor = "rgb(154, 208, 237)";
        x.style.display = "none";
    }

}

The problem is that inline styles, which is what you are setting through JS, take precedence over the ones that come from CSS classes, due to CSS specificity rules.

Adding a !important declaration on the hover background, like this, works:

.LinkBaraStanga:hover  {
    background-color: rgb(132, 197, 232) !important;
}

However, a better solution would be creating different classes for the different cases of the button, so you can better manage the different states, and don't run into the problem of having to override a previous !important declaration:

.LinkBaraStanga--off {
    background-color: rgb(154, 208, 237);
    ...
}
.LinkBaraStanga--off:hover  {
    background-color: rgb(132, 197, 232);
}
.LinkBaraStanga--on  {
    background-color: rgb(154, 208, 237);
}

And then instead of setting the element's style via JS, add or remove the desired classes. For example:

<button class="LinkBaraStanga LinkBaraStanga--off">

And on the JS, call these functions together to toggle between both classes:

element.classList.toggle('LinkBaraStanga--on')
element.classList.toggle('LinkBaraStanga--off')

For more information on how to set the classes of an element, refer to classList on MDN.

jQuery hover() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Depending on the browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

A much better way would be to get the background-color: rgb(132, 197, 232); in a seperate class, and then just toggle that whenever you like.

You can apply it like this:

var element = document.getElementById("myDIV");
element.classList.toggle("clicked");

where the css is:

.clicked {background-color: rgb(132, 197, 232);}

and it should work properly

CSS :hover Selector, to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. a:hover { background-color: yellow; }. Try it Yourself ». More "Try it Yourself" examples below. Tip: The :hover selector can be used on all elements, not only on links. Note: :hover MUST come after :link and :visited (if they are present) in the  Add a transition effect (opacity and background color) to a button on hover: Fade in on hover: Try it Yourself » Fade background on hover: Try it Yourself » Go to our CSS Transition Tutorial to learn more about transitions. Previous Next If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an

Fixed it. Just had to add "!important" in the hover class:

.LinkBaraStanga:hover  { background-color: rgb(132, 197, 232)!important; }

How to write :hover condition for a:before and a:after in CSS , How to display error without alert box using JavaScript ? The :hover is pseudo-​class and :before & :after are pseudo-elements. background-color: green;. CSS: :before and :after pseudo elements in practice / By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

Adding/Removing Class on Hover, removeClass('hover') } ) This will work in any browser on any element, to. from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack. but once i click it again the div dissappears but the color does not go away. I've used WordPress since day one all the way up to v17, a decision I'm very happy with. Below are the steps on how you can change the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown below. When defining the color of any web page element, you may need to use HTML color codes.

CSS Link Color, Learn how to use CSS to color your HTML links with Hex color codes and HTML tags, CSS IDs, classes, :hover and more. And as a bonus we'll even show you how to use CSS to change the link color on hover. a '#' sign in CSS and are generally meant to be used only once on any given webpage. ColorHarmony.​js. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

:hover, The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. Selects any <a> element when "hovered" */ a:hover { color: orange; } put the :hover rule after the :link and :visited rules but before the :active one, as defined by the  The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the event.type.

Comments
  • There are definitely better ways of doing this. Please explore. Don't stop here. :)