如何在不删除其他现有属性的情况下将更多css属性添加到CSS规则中

Question

假设我有一些代码 HTML code：

<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，一个人使用jquery。

您可以在CSS中创建一个包含红色的类。然后将该类添加到悬停的h1。

h1.redhover { color: #f00 }

$(this).addClass('redhover')

或者在css中添加以下内容：

ul li h1:hover {color: #f00;}

第一个是针对某些h1的，而另一个是针对所有h1的，它们都是一个ul和li。

祝你好运！

Answer 2

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

ul li:hover h1{ color: red; }

它不会覆盖原始规则