CSS 图像精灵

您所在的位置:网站首页 精灵真实图片 CSS 图像精灵

CSS 图像精灵

2024-07-12 09:15| 来源: 网络整理| 查看: 265

图像精灵 - 悬停效果

现在,我们要向导航列表中添加悬停效果。

提示::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