html - 在悬停时更改图像和链接

Question

我正在努力实现以下目标:

当用户将鼠标悬停在我的 navigationbar 上时，图像和文本必须改变颜色。我正在为图像使用 sprite。

<ul id="nav">
    <li id="nav_logo"><img src="images/lch.png" width="302" height="114" alt="LCH"></li>
    <li id="nav_over_lch"><a href="index.html"><span></span> OVER LCH </a></li>
    <li id="nav_nieuws"><a href="index.html"><span></span>NIEUWS</a></li>
    <li id="nav_activiteiten"><a href="index.html"><span></span>EVENTS</a></li>
    <li id="nav_fotos"><a href="index.html"><span></span>FOTO 'S</a></li>
    <li id="nav_contact"><a href="index.html"><span></span>CONTACT</a></li>
 </ul>

我已经有了一些 CSS:

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch span:hover{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li a:hover{color:#006699;}

这是更改图像和文本的 CSS 片段。到目前为止，当您将鼠标悬停在文本上时它会发生变化，而当您将鼠标悬停在图像上时它只会发生变化。 有什么想法可以在(跨浏览器)CSS 中实现这一点吗？

Answer 1

你应该把悬停放在你想要悬停的元素上

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch:hover span{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li:hover a{color:#006699;}