CSS教程:让鼠标经过时,链接(A)背景改变

我们需要的效果是怎么样的呢?先来看一下以下效果图片:



这种效果在很多网站上用做菜单,其实要实现这个效果。非常简单。 先定义CSS样式

a:hover{
    background:#f29901;
}
定义了以上样式表后,我们看到的效果如下所示:


可以看出，这样的效果还不是我们所想要的,需要进一步美化。

只需要再加上一句
a:hover{
    background:#f29901;
    display:block;
}

即可如效果图所示，当鼠标移动到超链接上的时候，整个li元素背景变色。

可是这样还有一个问题，鼠标必须移动到文字上面才能触发a:hover效果。
如果想要鼠标移动到元素li上的时候，就触发a:hover效果。可以这样写

a {
    width:130px; 
    /*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/
}

a:hover{
    background:#f29901;
    display:block;
}

下面附上完整例子代码：

html代码：
<ul id="content">
     <li><a href="javascript:;">导航菜单1</a></li>
        <li><a href="javascript:;">导航菜单2</a></li>
        <li><a href="javascript:;">导航菜单3</a></li>
        <li><a href="javascript:;">导航菜单4</a></li>
        <li><a href="javascript:;">导航菜单5</a></li>
        <li><a href="javascript:;">导航菜单6</a></li>
</ul>

css代码：
#content{}
#content li{
 line-height:30px;
 text-align:center;
 color:#fff;
 display:block;
 background:#333;
 width:100px;
}
#content li a{
 display:block;
 float:right;
 background:#333;
 width:100px;
 color:#fff;
 text-decoration:none;
}
#content li a:hover{
 color:#000;
 background:#fff;
}