Mono-Image CSS Rollovers

最新推荐文章于 2020-12-24 16:20:12 发布

最新推荐文章于 2020-12-24 16:20:12 发布 · 168 阅读

文章标签：

#CSS

CSS optimization 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS背景定位来创建图像精灵的技术，该技术可以有效地减少HTTP请求次数并避免菜单项状态变化时可能出现的闪烁问题。通过将多个图像状态整合到一个小型精灵图像中，并在鼠标悬停时改变背景位置，可以实现平滑的图像切换效果。

CSS is traditionally used to create rollover effects with two or more images for menus and other elements. Menus can use on, off, or visited images to signify the state of the menu. Typically menus are created using multiple background images, however. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the "off" image is not preloaded. A better way is to combine the on and off state images into one mini-sprite and switch the background position on rollover (see Figure 1).

multi-image rollover sprite

Figure 1: Multiple-image Rollover Sprite

Figure 1 shows the on and off image mini-sprite (enlarged for easier viewing). To display the on and off portion of our image we just need to change the background position in our menu. Here is the code:

a:link, a:visited {
  display: block;
  width: 127px;
   height:25px;
  line-height: 25px;
  color: #000;
  text-decoration: none;
  background: #fc0 url(image-rolloverdual.png) no-repeat left top;
  text-indent: 25px;
  color: #000;
}
a:hover {
  /* background: #c00; */
  background-position: right top;
  color: #fff;
}

The background in the off state (:link) positions the background image to the left and top showing the off state portion of the image. On rollover (:hover) the background position is shifted to the right displaying the “on” portion of the background image. The width value effectively clips the image to show only the portion of the image that you want displayed. You can also use this technique to highlight visited links. For extra credit, create the above effect entirely with CSS.

Here is the finished version of the dual rollover.