CSS实例:鼠标滑过文字超级链接背景变色

2024-07-11 09:04:25

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：CSS实例:鼠标滑过文字超级链接背景变色.

效果如下图

CSS实例:鼠标滑过文字超级链接背景变色

要实现这个效果。很简单。定义CSS样式

a:hover{
background:#f29901;
}

这段代码的显示效果如下图

CSS实例:鼠标滑过文字超级链接背景变色

显然，这样太丑了。

只需要再加上一句
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;
}

问题虽然小，但是经过自己研究解决印象更加深刻

上一篇：CSS网页布局的一些常见规则

下一篇：学完CSS后该学什么？

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注