现在，我们希望我们的导航列表中添加一个悬停效果。
lamp :hover 选择器用于鼠标悬停在元素上的显示的效果
提示： :hover 选择器可以运用于所有元素。在本站CSS参考手册的CSS:hover选择器一节，你可以更加了解该选择器的用法。
我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像：
navigation images
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。
我们添加悬停效果只添加三行代码：
实例
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
尝试一下 »
实例解析：
由于该列表项包含一个链接，我们可以使用：hover 伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px |
发表于 2024-5-6 10:03
|