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).
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.
分享到:
相关推荐
dejavu-lgc-sans-mono-fonts-2.33-1.el6.noarch.rpmdejavu-lgc-sans-mono-fonts-2.33-1.el6.noarch.rpm
mono-6.12.0.107-x64-0.msi
Unity 2019.3.11f1打包出来的mono-2.0-bdwgc.dll文件,解决老Unity报GetThreadContexFailed错误的方式尝试。
离线安装包,亲测可用
mono-6.6.0.161, 2019-12-10官方最新发布版本,墙内基本无法下载 The latest stable release is 6.6.0 Stable (6.6.0.161)
mono-unity-5.3 mono-unity-5.3 mono-unity-5.3 mono-unity-5.3 mono-unity-5.3
JetBrainsMono-2.242字体
mono-core-4.2.4-7.el7.x86_64.rpm
The Uno Platform is a Universal Windows Platform Bridge that allows UWP-based code (C# and XAML) to run on iOS, Android, and WebAssembly.
解决某些系统炉石传说GetThreadContext failed崩溃问题
mod_mono-2.10.tar.bz2,Linux安装MONO的组件之一。是最新版的tar包。
VINS-Mono is a real-time SLAM framework for Monocular Visual-Inertial Systems. It uses an optimization-based sliding window formulation for providing high-accuracy visual-inertial odometry. It ...
离线安装包,亲测可用
Mono Design是一款可以快速创建、编辑与设计3D产品的工具,初学者慎用。
VINS-Mono点线优化的源码
mono-unity核心源码 版本: 2019.4-mbe 已删除c#部分代码, 另外附带其依赖库, VS2015可以直接编译