首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

触发a标签hover事件,怎么在元素底部显示蓝色底块

2013-06-26 
触发a标签hover事件,如何在元素底部显示蓝色底块要显示的效果图如下:[aligncenter][/align]代码如下:sty

触发a标签hover事件,如何在元素底部显示蓝色底块
要显示的效果图如下:[align=center]触发a标签hover事件,怎么在元素底部显示蓝色底块
[/align]

代码如下:
<style>
div.menu ul li a:hover
{
    color: #000000; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
    background-color:Blue;
    background-repeat: no-repeat;
    background-position:bottom; 这里设置了无效??
    height: 1px;
    width:45px;
}
</style>
<body>
<div alt="触发a标签hover事件,怎么在元素底部显示蓝色底块" />
a a:hover html 鼠标悬浮
[解决办法]
你可以用li:hover     border-bottom:3px solid blue;
[解决办法]
还有给你个动画效果的网址,Jquery直接接口调用
不需多写代码
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/


里边有你的效果
[解决办法]
background-position是设置背景图像的起始位置,你也没有背景图像啊,另外你还设置了background-repeat,也是没用的。还有,对a设置height和width也是无效的,除非它的display设置成block。
你可以让li的border-bottom显示出来啊,用jquery很简单的:
$("#ul li").hover(function(){
 $(this).css("border-bottom","1px solid red");
},function(){
 $(this).css("border-bottom","none");
});

热点排行