懸停文本圖像

-2

我有一個常規的水平菜單欄。我想知道在鼠標懸停的情況下是否有可能使圖像與文本重疊？我有一個恐怖網站，我正在處理這個網站，並且我認爲，當鼠標懸停在菜單欄上的鏈接上方時，出現血腥的手印會很酷。我知道這是可能的，因爲我以前見過類似的東西，但我需要幫助才能把它拉開。提前致謝。懸停文本圖像

到首頁的第一個鏈接是我想在懸停時疊加在文本上的圖像。

<div id="header" style="font-size: 15px"> 

<ul id="menu"> 
<li><a style="color: #207000" href="Home.html"><img src="logo.png" width="30px" height="25px"/></a></li> 
<li><a style="color: #207000" href="Random.html">Random Page</a></li> 
<li><a style="color: #207000" href="Characters.html">Characters</a></li> 
<li> <a style="color: #207000" href="Timeline.html">Timeline</a></li> 
<li> <a style="color: #207000" href="Gallery.html">Gallery</a></li> 
<li> <a style="color: #207000" href="Videos.html">Videos</a></li> 
<li><a style="color: #207000" href="RegalFT.html">Regal Family Tree</a></li> 
</ul>

來源

2016-02-29 Joby

那你試試這麼遠嗎？沒有任何代碼很難幫助你。 – smdsgn

我甚至不知道從哪裏開始。我已經有一個工作菜單欄，我只想知道是否可以將它添加到已存在的菜單中。 – Joby

由於smdsgn評論了你的問題，沒有代碼，你已經嘗試過，這是其他人難以完全理解你要完成的任務。無論如何，假設我正確理解你的問題，我可以爲你提供幾個指針。

如果你只是想將圖像添加到您的菜單欄的鏈接時，它的上空盤旋，利用CSS」 :hover選擇與background屬性（或background-image屬性，如果你喜歡），我在這個jsfiddle所做的一切。

nav ul li:hover { 
    background: #someColour url(yourImage.file) no-repeat left; 
    background-size: 50px; 
    cursor: pointer; 
}

如果你想要更多的定製，比如隱藏鏈接文本時，它的上空盤旋，就可以實現一些jQuery的，因爲我在這jsfiddle所做的一切。

var hiddenText; 

$('li').hover(function() { 
    hiddenText = $(this).text(); 
    $(this).css({'background': '#someColour url(yourImage.file) no-repeat center','background-size': '50px'}) 
    $(this).text(''); 
}, function() { 
    $(this).css({'background': '#someOtherColour'}) 
    $(this).text(hiddenText); 
})

如果這些指針都不能爲您提供解決方案，請爲您的問題以及您嘗試的代碼添加更多詳細信息。

來源

2016-02-29 18:53:43 jritchey

好吧我已經想通了我自己。在css中使用z索引，我得到了這個html來處理我想要的方式，這樣「logo」圖像就會在懸停時淡入淡出。

<ul id="menu"> 
<li><a style="color: #207000" href="Home.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Home</a></li> 
<li><a style="color: #207000" href="Random.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Random Page</a></li> 
<li><a style="color: #207000" href="Characters.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Characters</a></li> 
<li> <a style="color: #207000" href="Timeline.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Timeline</a></li> 
<li> <a style="color: #207000" href="Gallery.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Gallery</a></li> 
<li> <a style="color: #207000" href="Videos.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Videos</a></li> 
<li><a style="color: #207000" href="RegalFT.html"><img class="img2" src="logo.png" width="40px" height="35px"/>Regal Family Tree</a></li>

來源

2016-02-29 21:25:17 Joby

懸停文本圖像

回答

相關問題