css图像拼合s-悬停效果实例与解析

2024-01-16 14:43 小编

图像拼合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

Tag：效果

联络方式：

微信二维码

您感兴趣的内容