如何在懸停期間將鏈接背景放在底下？

我無法弄清楚如何做到這一點，當我把鼠標懸停在一個鏈接上時，一條小小的橙色三角形出現在我已經有的一條線的下面。下面的HTML和CSS適用於此。如何在懸停期間將鏈接背景放在底下？

----- ----- HTML

<div id='links'> 
    <ul> 
    <li><a href='#'>home</a></li> 
    <li><a href='#'>interests</a></li> 
    <li><a href='#'>game</a></li> 
    <li><a href='#'>about</a></li> 
    <li><a href='#'>contact</a></li> 
    </ul> 
</div>

----- ----- CSS

div#links { 
background: url('images/links_bg.gif') no-repeat right; 
height: 75px; 
margin: 0px; 
} 
div#links ul { 
float: right; 
list-style: none; 
margin: 48px 35px 0px 0px; 
} 
div#links ul li { 
display: inline; 
margin: 0px; 
} 
div#links ul li a { 
color: #e5e4e4; 
font-size: 12px; 
text-decoration: none; 
margin: 0px 15px 0px 15px;; 
} 
div#links ul li:hover { 
background: url('images/link_triangle.png') no-repeat; 
font-weight: bold; 
}

我也對所有的背景圖像鏈接。我認爲問題在於，由於每個鏈接基本上都是圍繞文本的一個框，所以您無法給它一個延伸過該框的背景。我只是不知道如何解決它。

來源

2011-12-29 Dylan Buth

你可以發佈http://imgur.com/鏈接爲背景圖片嗎？ – 2011-12-29 05:04:55

當然，你可以給它一個延伸過框的背景，只是給框填充。如果你想在jsfiddle.net上演示一下，可能會更容易理解這個問題？ – kojiro 2011-12-29 05:05:38

我有一個jsFiddle幾乎準備好時，他可以提供圖像：http://jsfiddle.net/joshsmith/MG3e9/。當我上牀睡覺時，請隨意叉和答覆。 – 2011-12-29 05:07:03

我只是亂糟糟的填充和什麼不一段時間。最終得到它。謝謝您的幫助。

來源

2012-04-29 19:00:47

你可以做的是使用jQuery在div以下的鏈接下使用position: absolute在mouseover上顯示圖像。

來源

2011-12-29 05:06:19

我還不知道jquery。有點剛剛開始。 – 2011-12-29 05:07:09

@DylanButh夠公平的。這可能在CSS中更好，但我無法幫助你，直到我得到這些圖像。 – 2011-12-29 05:08:29

如何在懸停期間將鏈接背景放在底下？

回答

相關問題