如何防止重寫：將鼠標懸停在.click動作上

Question

我需要：hover和.click一起工作。

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

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

和CSS：

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

當我單擊div時，懸停效果消失。

Answer 1

單擊div時應添加一個類（在示例中用作類名）。 當.css（）添加優先於CSS類的內聯樣式屬性時，就會出現您的問題。

的CSS

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

腳本

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

演示

要么

您可以使用!important與.d:hover類

的CSS

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

演示

Answer 2

您也可以使用：

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

從元素樣式中“刪除”背景樣式。

來自： http : //api.jquery.com/css/#css-propertyName-value

將樣式屬性的值設置為空字符串，例如$（“ #mydiv”）.css（“ color”，“”）-如果該屬性已被直接應用（無論是HTML樣式），則將其從元素中刪除。屬性，通過jQuery的.css（）方法或通過對style屬性的直接DOM操作。