如何防止重写：将鼠标悬停在.click动作上

Question

I need :hover and .click work together.

<div class="d">...</div>

$('.d').click(function()
{
    $(this).parent().find('.d').css('background-color', 'white');
    $(this).css('background-color', 'red')
});

and css:

.d {
    background-color: white;
}
.d:hover {
    background-color: red;
}

When I click on the div hover effect disappear.

Answer 1

You should add a class when div is clicked(used as class name in example). Your problem arises as .css() add inline style attribute which has priority over CSS class.

CSS

.d {
    background-color: white;
}
.d:hover, .clicked {
    background-color: red;
}

Script

$('.d').click(function () {
    $(this).parent().find('.d').removeClass('clicked');
    $(this).addClass('clicked')
});

DEMO

OR

You can use !important with the .d:hover class

CSS

.d:hover{
    background-color: red!important;
}

DEMO

Answer 2

You can also just use:

$('.d').click(function () {
    $(this).parent().find('.d').css('background-color', '');
    $(this).css('background-color', 'red')
});

to "remove" the background style from the element style.

from: http://api.jquery.com/css/#css-propertyName-value

Setting the value of a style property to an empty string — eg $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.