0

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

当用户悬停 mynavigationbar时，图像和文本必须改变颜色。我正在为图像使用精灵。

<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中实现这一点？

4

1 回答 1

2

您应该将鼠标悬停在您希望悬停的元素上

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;}
于 2013-06-08T17:28:41.780 回答