Use CSS to create a mouse image

In the past, when we used tables to deploy web pages, we liked to use the "mouse over the image" in DW (Dreamweav), because it was really attractive! However, we also found this problem: when the network speed is not fast, the picture after the mouse passes has not been downloaded, and it looks very bad. In addition, a lot of JS code is required, and images need to be preloaded. Relatively troublesome! It is especially annoying for those who use notepad to manually compile web pages. In fact, CSS can solve this problem. It is very simple and fast to download, so there will be no download of images after the mouse is passed. The principle of this practice is very simple: use the <a> label a: hover to trigger the mouse event, and then use CSS to change the upper, lower, and lower positions of the background. Next, we will mainly analyze how to use CSS to create an image with the mouse ".
XHTML code:

The code is as follows:	Copy code
<Ul id = "nav"> <Li id = "nav1"> <a href = "/" mce_href = "/"> nav1 </a> </li> <Li id = "nav2"> <a href = "/" mce_href = "/"> nav2 </a> </li> <Li id = "nav3"> <a href = "/" mce_href = "/"> nav3 </a> </li> <Li id = "nav4"> <a href = "/" mce_href = "/"> nav4 </a> </li> <Li id = "nav5"> <a href = "/" mce_href = "/"> nav5 </a> </li> </Ul>

Here we will use a menu to explain how to use it in practice. Here we can see that there are no images, because our images are called with CSS backgrounds, and each LI has an ID, which is because the menu images here are different! Each LI has its own menu content.
Now, we need to process this list of horizontal emissions:

The code is as follows:	Copy code
# Nav li {margin: 0; padding: 0; list-style: none; display: inline ;}

We all know that <a> a tag is not a default block-level element. If it is not a block-level element, the mouse-induced hot zone is not the length and width we set, but the size of its element. But CSS can declare it as a block-level element.

The code is as follows:	Copy code
# Nav a {float: left; padding: 34px 0 0 0; overflow: hidden; height: 50px ;}

Here is a very interesting thing! That is, whether "display: block;" in this sentence is the same. Here, "padding: 34px 0 0 0;" is half the height of our background image (note: The background image combines the two pictures together) however, it is not used to control the background image, but to hide the text in the <a> label. Because the trigger action and the moving position are the same, you can describe the position of the moving back in a centralized manner.

The code is as follows:	Copy code
# Nav a: hover {background-position: 0-34px ;}

It means that when all links under # nav move the mouse over, the background is moved up to 34 pixels. The last step is to add a background image to each link in the menu.

The code is as follows:	Copy code
# Nav1 a {width: 59px; background: url(btn_nav1.jpg) top left no-repeat ;} # Nav2 a {width: 69px; background: url(btn_nav2.jpg) top left no-repeat ;}

......
All right, complete. Note that "padding: 34px 0 0 0;" "# nav a: hover {background-position: 0-34px ;} you need to set the value according to your actual situation.