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