为菜单项添加悬停状态用少许白条

考虑以下结构：为菜单项添加悬停状态用少许白条

<ul> 
    <li><a href="">Home</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li> 
    <li><a href="">Contacts</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li> 
</ul>

这里，为“a”块元件（显示：块），它是一个菜单元素，具有一定的高度和右填充和左：

li 
{ 
display:inline-block; 
float:left; 
position:relative; 
} 
a 
{ 
    text-decoration:none; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color:#131313; 
    display:block; 
    line-height:51px; 
    padding:0px 29px; 
} 
a:hover 
{ 
    background-color:#000; 
    border:0 none; 
    color:#FFF; 
} 
.whiteBarHover 
{ 
    width:40px; 
    height:3px; 
    position:absolute; 
    top:2px; 
    visibility:hidden; 
} 
div#menu li:hover img.whiteBarHover 
{ 
    visibility:visible; 
}

的“IMG”和相关的CSS代码中的每个“里”的点低于

menu_hover_line.jpg => 01已示出的图像

悬停事件在每个菜单项的顶部中心。一切都完成了。但图像不在水平方向上居中。我如何能够集中它？

来源

2012-03-08 Karine

您应该创建一个小提琴，它很难想像这整件事 – 2012-03-08 03:35:55

我不知道如何将图像添加到小提琴。 – Karine 2012-03-08 03:38:22

img的尺寸是多少？ – 2012-03-08 03:41:08

如果这是一个p osition absolute那么你必须定义left:50% & margin-left:-20px;图像宽度的一半。像这样：

.whiteBarHover 
{ 
    width:40px; 
    height:3px; 
    position:absolute; 
    top:2px; 
    left:50%; 
    margin-left:-20px; 
    visibility:hidden; 
}

入住这http://jsfiddle.net/BrURq/

来源

2012-03-08 03:46:26 sandeep

Yessss，正好。非常感谢！！！ – Karine 2012-03-08 03:50:01

为菜单项添加悬停状态用少许白条

回答

相关问题