Changing backgroundColor with javascript affects CSS's :hover

Question

I have set of 6 divs, and when I click on each of them, a certain div changes its innerHTML, like some kind of menu. When user hovers over those "buttons" (actually divs), they highlight with CSS's property :hover. There's also :active, when a user is clicking on a "button".

Since the "information" div changes when clicked, I'd like to have the current selected div constantly highlighted, in a whole different color than when on hover. So I used javascript for this. I call a function that changes background color of all of the "buttons" (so I don't have to "remember" which one was clicked), and then changes this div's backgroundColor to appropriate color.

However, now I lost my :hover and :active styles. How to handle this?

Here are code snippets as requested:

function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}

function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}

meaning is a string, menubuttonX are 6 div's that act like buttons.

#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}

#kotd .menubutton:hover {
background-color: #aaa;
}

#kotd .menubutton:active {
background-color: #bbb;
}

can you post your codes? this is to make things easier for us to understand and gives solution. — Ron
– Ron, Commented Jul 2, 2013 at 11:24
I call a function that changes background color... Copy paste the function pls... I like I would say I made an airplane. Why it does not fly? — zozo
– zozo, Commented Jul 2, 2013 at 11:26

Community · Accepted Answer · 2017-05-23 12:28:59Z

5

instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.

To explain the idea a bit further:

When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.

In jQuery it is really easy. You can do something like this:

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

Step-by-step:

you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First

$(".menubutton").removeClass("current");

again gets all objects with class menubutton and removes the class current from any of them that have it. Second

$(this).addClass("current");

adds class current ti "this" ... meaning the clicked object.

This will make the clicked object in the DOM look something like this:

<div class="menubutton current">

In your CSS you can now style the objects that has the additional current class:

.currnet {
    background-color:blue;
    color:white;
}

DEMO

In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:

How to add/remove a class in JavaScript?

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Jul 2, 2013 at 11:27

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Lazar Ljubenović Over a year ago

Can't use jQuery since... Well, never studied it. Jsut started with HTML, CSS and JS three days ago, so I want to see how these stuff work first. Could you elaborate your solution since I don't understand it?

David Thomas Over a year ago

The classList api is almost as nice (albeit not fully cross-browser, sadly).

Lazar Ljubenović Over a year ago

Thanks in advance. You don't have to create whole jsfiddle though, just a line where I change/toggle style of a div with JS would be nice, with brief explanation how does it work.

Martin Turjak Over a year ago

jQuery is just a library of many useful JS functions ... so first you have to include the jQuery itself somewhere in the head of your html ... so that you can make use of its functions ... you have to include it before you call the functions. Then you can write jQuery functions in a .js file or script block, just as you would do with other JS scripts. You can of course combine jQuery functions with any native JS.

Martin Turjak Over a year ago

You could start maybe with this tutorial and see how to integrate it into your page here. And you can find an extensive documentation on all the functions on the jQuery homepage and loads of tutorials. Hope this helps ^_^

|

Roy M J · Accepted Answer · 2013-07-02 12:02:13Z

1

You should be using jquery's .hover() function extensively.

Check out http://api.jquery.com/hover/ & http://api.jquery.com/click/

The samples and you can easily do this.

To be exact, you should be using the following two built-in functions :

$(selector).hover(handlerIn, handlerOut);

$(selector).click(event);

Cheers

answered Jul 2, 2013 at 12:02

Roy M J

6,9367 gold badges54 silver badges79 bronze badges

Collectives™ on Stack Overflow

Changing backgroundColor with javascript affects CSS's :hover

2 Answers 2

To explain the idea a bit further:

Step-by-step:

DEMO

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

To explain the idea a bit further:

Step-by-step:

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related