css图像拼合s-悬停效果实例与解析
导读：图像拼合s-悬停效果 现在，我们希望我们的导航列表中添加一个悬停效果。 提示：hover选择器用于鼠标悬停在元素上的显示的效果，hover选择器可以运用于所有元素。 我们的新图像("img_navsprites_hover...
图像拼合s-悬停效果
现在，我们希望我们的导航列表中添加一个悬停效果。
提示：hover选择器用于鼠标悬停在元素上的显示的效果，hover选择器可以运用于所有元素。
我们的新图像("img_navsprites_hover.gif")包含三个导航图像和三幅图像：
navigationimages
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。
我们添加悬停效果只添加三行代码：
实例
#homea:hover{
background:url('img_navsprites_hover.gif')0-45px;
}
#preva:hover{
background:url('img_navsprites_hover.gif')-47px-45px;
}
#nexta:hover{
background:url('img_navsprites_hover.gif')-91px-45px;
}
实例解析：
由于该列表项包含一个链接，我们可以使用：hover伪类
#homea:hover{
background:transparenturl(img_navsprites_hover.gif)0-45px;
}
-对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css图像拼合s-悬停效果实例与解析
本文地址： https://pptw.com/jishu/664024.html