CSS 图像精灵 |
您所在的位置:网站首页 › 精灵真实图片 › CSS 图像精灵 |
图像精灵 - 悬停效果
现在,我们要向导航列表中添加悬停效果。 提示::hover 选择器可用于所有元素,而不仅限于链接。 我们的新图像("navsprites_hover.gif")包含三幅导航图像和三幅用于悬停效果的图像: ![]() 因为这是一幅图像,而不是六个单独的文件,所以当用户将鼠标悬停在图像上时,不会有加载延迟。 我们仅添加三行代码来实现悬停效果: 实例 #home a:hover { background: url('navsprites_hover.gif') 0 -45px; } #prev a:hover { background: url('navsprites_hover.gif') -47px -45px; } #next a:hover { background: url('navsprites_hover.gif') -91px -45px; }亲自试一试 例子解释:#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置,仅向下 45 像素 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |