Question

Let say I have some code
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 code:

ul li h1 {
    background: #bada55;
}

Now, when I hover on <li>, I want the text inside turns to red. So I write a jQuery code:

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

The text turns to red, but it removes the <h1> ‘s background property.
So, anyone show me the solution?
Thanks

Answer 1

There is CSS rule to hover which works in most modern browsers

ul li:hover h1{ color: red; }

it will not overwrite original rules