CSS hover effect does not work after running jquery function

Question

Here is my css:

.parentDiv {
}

.childDiv {
    height:40px;
    width:165px;
    color:#D6D6D6;
    text-align:left;
    cursor:pointer;
    font-size:.85em;
    font-weight:normal;
    border-top:1px solid #0F0F0F;
}

.childDiv:hover{
    background:#2B2B2B;
}

Here is my jquery:

<script type="text/javascript">

    $('.childDiv').click(function(){
        $(this)
            .css('background-color','#4F94CD')
            .siblings()
            .css('background-color','black');
    });

</script>

The div hover effect of the class childDiv work perfectly. However, once I run the above jquery function, the CSS hover effect no longer seems to work. It is essential that I am still able to use the hover effect after running this jquery function, I tried to look for a jquery substitute for the hover effect, but none worked perfectly. If anyone knows how to solve this, help would be greatly appreciated, thanks!

possible duplicate of losing css hover with jquery

j08691
– j08691

2012-03-17 22:01:37 +00:00
Commented Mar 17, 2012 at 22:01 — j08691
– j08691, Commented Mar 17, 2012 at 22:01

tbleckert · Accepted Answer · 2012-03-17 22:22:32Z

17

That sounds not weird...Try to set !important on the hover background, like this:

.childDiv:hover {
  background: #2b2b2b !important;
}

edited Mar 17, 2012 at 22:22

answered Mar 17, 2012 at 22:00

tbleckert

3,8014 gold badges34 silver badges40 bronze badges

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

3 Comments

Jeff B Over a year ago

This is not weird. jQuery adds CSS directly to the element, and by CSS rules, the most specific CSS takes precedent. CSS applied directly is more specific that applied by style sheet. The !important tells it to always use this as the style.

tbleckert Over a year ago

Oh, didn't notice background-color vs just background.

Jeff B Over a year ago

The same still applies, even if you use background-color.

Jeff B · Accepted Answer · 2012-03-17 22:12:40Z

3

jQuery adds CSS directly to the element, and by CSS rules, the most specific CSS takes precedent. CSS applied directly is more specific than CSS applied by a style sheet.

To fix this, first apply the color using the same CSS (background-color rather than background), and then add !important to tell the browser that you want that style to override any others:

.childDiv:hover {
    background-color: #2b2b2b !important;
}

background: is technically valid, but is used as a shortcut when defining all background properties. And maybe you are, but here I do just to be sure we don't get any weird precedence rules.

Demo: http://jsfiddle.net/mYwh2/

answered Mar 17, 2012 at 22:12

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Comments

Ian Wood · Accepted Answer · 2012-03-17 22:04:36Z

1

This is because jquery apply styles by adding an in-line style attribute which overrides any css.

Your best solution would be to add classes rather than set css porperties - this will allow the css:hover to still function.

Try this:

.parentDiv{
}
.childDiv{
background-color: #000;
height:40px
width:165px;
color:#D6D6D6;
text-align:left;
cursor:pointer;
font-size:.85em;
font-weight:normal;
border-top:1px solid #0F0F0F;
}
.childDiv:hover{
background:#2B2B2B;
}
.selected{
background-color: #4F94CD;
}

with this jquery:

<script type="text/javascript">
$(function(){
    $('.childDiv').click(function(){
        $(this).toggleClass('selected');
    });
});

answered Mar 17, 2012 at 22:04

Ian Wood

6,5736 gold badges36 silver badges75 bronze badges

Collectives™ on Stack Overflow

CSS hover effect does not work after running jquery function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related