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, CommentedDec 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, CommentedDec 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, CommentedDec 28, 2012 at 15:29
i didnt know that javacript sets inline css for elements. Thanks for this. — sdnr1, CommentedDec 29, 2012 at 6:45

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

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

adding !important to the style property solved my exact same problem! — Enrico, CommentedJul 24, 2013 at 9:00

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related