CODEWITHSUNDEEP
javascriptcss
Lazar Ljubenović
Lazar Ljubenović

Reputation: 19754

Changing backgroundColor with javascript affects CSS's :hover

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;
}

Upvotes: 2

Views: 1383

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21214

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?

Upvotes: 5

Roy M J
Roy M J

Reputation: 6938

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

Upvotes: 1

Related Questions