触发a标签hover事件，怎么在元素底部显示蓝色底块
日期：2014-05-17 浏览次数：20748 次
触发a标签hover事件，如何在元素底部显示蓝色底块
要显示的效果图如下：[align=center]
[/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 class="menu">
<div class="logo" runat="server">
<ul>
<li><a href="../GdchInfo/ContactWay.aspx" runat="server">联系我们</a></li>
<li><a href="../About/ChuangHengDevelop.aspx" runat="server">关于创恒</a></li>
<li><a href="../Agent/ProductAgent.aspx" runat="server">产品代理</a></li>
</ul>
</div>
</body>
问题是：当鼠标移到标题时，显示蓝色背景在元素顶部，而非在其底部？
运行的效果图如下：
------解决方案--------------------
你可以用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");
});
要显示的效果图如下：[align=center]
[/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 class="menu">
<div class="logo" runat="server">
<ul>
<li><a href="../GdchInfo/ContactWay.aspx" runat="server">联系我们</a></li>
<li><a href="../About/ChuangHengDevelop.aspx" runat="server">关于创恒</a></li>
<li><a href="../Agent/ProductAgent.aspx" runat="server">产品代理</a></li>
</ul>
</div>
</body>
问题是：当鼠标移到标题时，显示蓝色背景在元素顶部，而非在其底部？
运行的效果图如下：
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");
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
