快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

效果如下图



要实现这个效果。很简单。 定义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;
}


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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号