CSS instance: Change background color when mouse over hyperlink text

Let's start with simple:

CSS lets you set the color of hyperlinks at different times:

<style>A:link{Color:#FF0000} /*non-visited links*/a:visited{Color:#00FFFF} /*links that have been visited*/a:hover{Color:#0000FF} /*move the mouse over the link*/a:active{Color:#00FF00} /*the selected link*/</style>

<ulID= "Content">        <Li><ahref= "Http://www.baidu.com">Baidu</a></Li>        <Li><ahref= "Http://www.renren.com">Renren Network</a></Li>        <Li><ahref= "Http://www.hao123.com">Hao123</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 4</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 5</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 6</a></Li></ul>

The effect is not, run it yourself

Here's a little bit more complicated: change the background color when the mouse is over the hyperlink text:

<style> a:link{Color:#FF0000;}/*non-visited links*/a:visited{Color:#00FFFF;}/*links that have been visited*/a:hover{Color:#0000FF;background:#f29901; border-radius:7px;}/*move the mouse over the link*/a:active{Color:#00FF00;}/*the selected link*/</style>

<ulID= "Content">        <Li><ahref= "Http://www.baidu.com">Baidu</a></Li>        <Li><ahref= "Http://www.renren.com">Renren Network</a></Li>        <Li><ahref= "Http://www.hao123.com">Hao123</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 4</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 5</a></Li>        <Li><ahref= "javascript:;">Navigation Menu 6</a></Li></ul>

background:#f29901;    This is setting the background color.
border-radius:7px;     This is to set the background color block to be displayed as a rounded rectangle.

You can also set the width of the hyperlink background color block

A
width:130px;
the width of the/*li element, which is the equivalent of defining a width range, triggers the a:hover effect when the mouse moves to the upper range * /

Display:block;
}

See the original reference for details.

Reference: http://www.warting.com/web/201010/10594.html