Home > Developer > Web Develop
CSS implementation of the mouse through the link to switch background image instance code:
Many navigation bar has this effect, when the mouse is sliding over the time to achieve the background image of the switch, is a better effect, it is also a navigation bar the most basic landscaping.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">ul Li{List-style:None;width:150px;Height:30px;Line-height:30px;text-align:Center;float: Left;Margin-left:5px;}ul Li a{Display:Block;width:150px;Height:30px;text-decoration:None;background:Blue;}ul Li A:hover{background:Red}</style></Head><Body> <ul> <Li><ahref="#">Ant Tribe One</a></Li> <Li><ahref="#">Ant Tribe II</a></Li> <Li><ahref="#">Ant Tribe Three</a></Li> <Li><ahref="#">Ant Tribe Four</a></Li> </ul></Body></HTML>
In the above code, in order to facilitate the demonstration, the background image is replaced with the background color, in the actual application as long as the background color to replace the background color can be.
The principle is very simple, mainly uses the link pseudo-class, specifically can refer to the CSS pseudo-class selector E:hover a chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9798
For more information, refer to: http://www.softwhy.com/divcss/
CSS implementation of the mouse through the link to switch background image instance code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
