Home > Developer > Web Develop
How CSS implements hyperlink background switching:
Recommendation: As far as possible handwriting code, can effectively improve the learning efficiency and depth.
A significant number of sites in the navigation bar has this effect: when the mouse on the navigation column, the background image will change, and then restore the original background image. Here's a brief look at how to achieve this. The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Div{Height:28px;width:300px;Border-bottom:3px Solid #E10001;}ul{List-style:None;margin:0px;padding:0px;}ul Li{float: Left;width:87px;Height:28px;Margin-left:2px;Display:inline;}ul Li a{width:87px;Height:28px;Display:Block;font-size:14px;text-align:Center;Line-height:28px;text-decoration:None;Color:#333;background:URL (mytest/demo/bg1.gif) no-repeat;}ul Li A:hover{background:URL (mytest/demo/bg2.gif) no-repeat;}</style></Head><Body><Div> <ul> <Li><ahref="#">CSS Zone</a></Li> <Li><ahref="#">JS Zone</a></Li> <Li><ahref="#">HTML area</a></Li> </ul></Div></Body></HTML>
The above code implements our requirements. The process of implementation is very simple:
The first step is to set a background picture in the default state of the hyperlink.
Second, set the mouse over the hyperlink to another background image.
Note: The A element must be converted to block-level elements, otherwise the height and width cannot be set.
Background images can also be combined on a single image, and related content can be found in how CSS merges background images in a single picture.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4683
How CSS implements hyperlink background switching
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
