Question

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

当用户悬停我的navigationbar时，图片和文字必须更改颜色。我正在为图像使用精灵。

<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;}

在悬停时更改图像和链接

1 个答案: