jquery - 如何在 CSS 规则中添加更多 CSS 属性而不删除其他现有属性

Question

假设我有一些代码
HTML 代码:

<ul>
    <li>
        <h1>Title 1</h1>
        <p>Text 1</p>
    </li>
    <li>
        <h1>Title 2</h1>
        <p>Text 2</p>
    </li>
</ul>

CSS 代码:

ul li h1 {
    background: #bada55;
}

现在，当我将鼠标悬停在 <li> 上时，我希望里面的文字变成红色。所以我写了一段jQuery代码:

$('li').hover(function(){
    $(this).find('h1').css('color': 'red');
});

文本变为红色，但删除了 <h1>的背景属性。那么，有人告诉我解决方案吗？谢谢

Answer 1

CSS 悬停规则适用于大多数现代浏览器

ul li:hover h1{ color: red; }

它不会覆盖原来的规则