Using CSS to make the mouse through the image

css| Mouse

When we used tables to lay out our pages, we liked to use the "mouse over the image" in DW (DREAMWEAV) because it was really fascinating! But we also found that a problem: when the speed is not too fast, the mouse after the picture has not been downloaded, it looks very beautiful. And also need a lot of JS code, also need to preload through the picture. Comparatively troublesome! Especially for those who are now notepad to hand-write web pages are more annoying. In fact, you can solve this problem with CSS, and very simple, download fast, do not appear after the mouse after the picture has not been downloaded this situation. The principle of this approach is simple: to use the <a> tag a:hover to trigger the mouse event, and then through the CSS to change the background of the top and bottom position. The following is the main analysis of the use of CSS to make "the mouse through the image."

XHTML 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 a menu to explain, in practical use we may have other aspects of use. Here we see no pictures, that is because our pictures are in the context of CSS calls, and each Li has an ID, that is because the menu picture here is different! Each li has its own menu content.

Okay, now we need to deal with this list. Horizontal emissions:

#nav li {margin:0; padding:0; list-style:none; display:inline;}

We all know that <a> tags are not the default block level elements, if not block-level elements of the mouse induction of the Hot zone is not the length of our set, but the size of its element itself. But CSS can declare it as a block-level element.

#nav a {float:left; padding:34px 0 0 0; overflow:hidden; height:50px;}

Here's a very interesting thing! That is, in this sentence there is no "display:block;" Are the same. Here's "padding:34px 0 0 0;" is half the height of our background picture (note: The background image is the picture that fits the two pictures together) but 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 focus on the position of the moving figure.

#nav a:hover {background-position:0 -34px;}

All the links under #nav move the background up by 34 pixels when the mouse passes. The last is to add a background picture to each link in the menu.

#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;}
......

Well, finished, which should be noted: "padding:34px 0 0 0;" #nav a:hover {background-position:0 -34px} "needs to set the value according to its actual situation.