css hover event not working after using javascript?

Question

Here is the code in which i am having the problem-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00;
}

#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0;
}
</style>
</head>
<body>
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

<script type="text/javascript">

var pElements = document.getElementsByTagName("p");

$('#col1').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#f00";
}
});

$('#col2').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#ff0";
}
});

</script>
</body>
</html>

What i actually want is that when i hover a color div, the color of text in p tag changes for only that time when the color div is hovered. When the color div is clicked the color of text should change permanently.

The problem with is that once i click on 1 of the color divs to finalize it for p tag, and then after that the other color is hovered the color change doesnt take place. The color permanently changes on click as it should happen.

Don't use inline styles. Add/remove a class instead, and base the desired CSS styling on those. — user1233508
– user1233508, Commented Dec 28, 2012 at 15:20
I am not using any inline-styling. The problem that once the javascript is executed wheen the div clicked, then the hover event doesnt work. Try doing this practically. — sdnr1
– sdnr1, Commented Dec 28, 2012 at 15:27
Your JavaScript sets the element styles explicitly, and styles set that way have priority over non-!important CSS styles. — user1233508
– user1233508, Commented Dec 28, 2012 at 15:29
i didnt know that javacript sets inline css for elements. Thanks for this. — sdnr1
– sdnr1, Commented Dec 29, 2012 at 6:45

jeremysawesome · Accepted Answer · 2012-12-28 15:32:02Z

15

When you set the p elements style with pElements[i].style.color = "#f00"; you are setting a more specific style then the one applied by your hover. In CSS, the most specific style get's applied to the element. The CSS hover class you've got defined will never be applied because it is not specific enough to overwrite the inline styles applied by your javascript code.

You could modify your CSS hover class to use the !important tag, this should allow you to apply the hover style even though it is not as specific as the inline style.

#col2:hover ~ p {
    color: #ff0 !important;
}

answered Dec 28, 2012 at 15:32

jeremysawesome

7,2745 gold badges35 silver badges38 bronze badges

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

1 Comment

Enrico Over a year ago

adding !important to the style property solved my exact same problem!

Luis · Accepted Answer · 2012-12-28 15:39:09Z

If its not a problem using JQuery, I think is what you want: Live Example

HTML code snippet

<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

CSS code snippet

p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}

JS code snippet

$("#col1").click(function () {
    $("p").css("color","#f00");
});

$("#col2").click(function () {
    $("p").css("color","#ff0");
});

Hope it helps!

Collectives™ on Stack Overflow

css hover event not working after using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related