今天小编给大家介绍下CSS实例:鼠标滑过文字超级链接背景变色，平时喜欢CSS实例:鼠标滑过文字超级链接背景变色的朋友赶紧收藏起来吧！记得点赞哦~
效果如下图
要实现这个效果。很简单。 定义CSS样式
a:hover{
background:#f29901;
}
这段代码的显示效果如下图
显然，这样太丑了。
只需要再加上一句
a:hover{
background:#f29901;
;
}
即可如效果图所示，当鼠标移动到超链接上的时候，整个li元素背景变色。
可是这样还有一个问题，鼠标必须移动到文字上面才能触发a:hover效果。
如果想要鼠标移动到元素li上的时候，就触发a:hover效果。可以这样写
a {
;
/*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/
}
a:hover{
background:#f29901;
;
}
下面附上完整例子代码：
html代码：
ul id="content"
lia href="javascript:;"导航菜单1/a/li
lia href="javascript:;"导航菜单2/a/li
lia href="javascript:;"导航菜单3/a/li
lia href="javascript:;"导航菜单4/a/li
lia href="javascript:;"导航菜单5/a/li
lia href="javascript:;"导航菜单6/a/li
/ul
css代码：
#content{}
#content li{
;
;
color:#fff;
;
background:#333;
;
}
#content li a{
;
;
background:#333;
;
color:#fff;
;
}
#content li a:hover{
color:#000;
background:#fff;
}
问题虽然小，但是经过自己研究解决印象更加深刻
