JavaScript blocking CSS

Question

I have a set of buttons that, when moused over, change color. The CSS for these runs this way:

#navsite ul li button
{
    height: 60px;
    width: 60px;
    background-image: -moz-linear-gradient(bottom, black, #4D4D4D);
    box-shadow: 2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

#navsite ul li button:hover
{
    height: 60px;
    width: 60px;
    background-image: none;
    background-color: #00054C;
    box-shadow:  2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

Then, JavaScript changes the color on click (the example below covers one of five buttons, and there is a function for each button, forgive the bulk):

function dude()
{
    document.getElementById("dude").hidden=false;
    document.getElementById("bob").hidden=true;
    document.getElementById("ted").hidden=true;
    document.getElementById("joe").hidden=true;
    document.getElementById("fred").hidden=true;
    document.getElementById("button1").style.background='#00054C';
    document.getElementById("button2").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button3").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button4").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button5").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
}

My problem now is that after this script has been activated, the CSS rule #navsite ul li button:hover no longer applies, and there is no mouseover effect at all. How do I fix the script so that it doesn't stop the CSS from running properly?

EDIT: Should I be considering converting that CSS clause to a part of the script itself? I've found it impossible to convert the script to CSS clauses, and I'd like to have minimal resources going on.

I've changed the script so that it lists active and inactive classes instead of listing the colors themselves. Its still rather bulky, though; any ideas on how to condense it?

That code looks like you have the same thing copy and pasted mutliple times to change different buttons, there are more efficient ways of doing it. — epascarello
– epascarello, Commented Jul 10, 2012 at 18:09
You're setting bakground-color and background-image in the CSS, but background in the script. Perhaps try altering the script to set style.backgroundImage and style.backgroundColor instead? — Olly Hodgson
– Olly Hodgson, Commented Jul 10, 2012 at 18:18
Remember, styling that comes from JS is entered inline, which has a higher priorty number than that of a stylesheet. — Vin Burgh
– Vin Burgh, Commented Jul 10, 2012 at 18:20
By the way, a lot of your CSS in the example above is not necessary. A #navsite ul li button:hover is still a #navsite ul li button, so you don't need to repeat all the properties that aren't changing. In your example only the background-image and background-color properties are required in the :hover bit. — Rob Trickey
– Rob Trickey, Commented Jul 10, 2012 at 18:43

Henrik Janbell · Accepted Answer · 2012-07-10 18:17:00Z

2

Don't add the styling directly to the element usign javascript, instead create a class .active and append that to clicked elements. Then remove the class when not active any more.

.active{-moz-linear-gradient(bottom, black, #4D4D4D)}

answered Jul 10, 2012 at 18:17

Henrik Janbell

1,9523 gold badges22 silver badges30 bronze badges

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

Comments

Bergi · Accepted Answer · 2012-07-10 18:25:25Z

0

Should I be considering converting that CSS clause to a part of the script itself?

No. Put away the presentation from the behaviour.

I've found it impossible to convert the script to CSS clauses

No. Use classes in your CSS, you can dynamically change them with JavaScript:

button.active, button:hover {
    background: #00054C;
    /* forget about all the other properties, they are inherited!
    You know what the "C" in "CSS" stands for? */
}

JS:

document.getElementById("button1").className = "active";

BTW, I guess you should not use the hidden property, which is not supported by IE, to hide your content. Use inline styles instead:

document.getElementById("dude").style.display = "none";

answered Jul 10, 2012 at 18:25

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

JavaScript blocking CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related