爲菜單項添加懸停狀態用少許白條

考慮以下結構：爲菜單項添加懸停狀態用少許白條

<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

爲菜單項添加懸停狀態用少許白條

回答

相關問題