Question

我有一个常规的水平菜单栏。我想知道在用鼠标悬停时是否有可能让图像与文本重叠？我有一个恐怖网站，我正在努力，我认为当盘旋时，在菜单栏上的链接上显示血腥手印会很酷。我知道这是可能的，因为我以前见过类似的东西，但我需要帮助将它拉下来。提前谢谢。

主页的第一个链接是我想在悬停时叠加在文本上的图像。

 <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>

Answer 1

当smdsgn评论你的问题时，如果没有你已经尝试的代码，其他人很难完全理解你想要完成的事情。无论如何，假设我正确理解你的问题，我可以为你提供一些指示。

如果您只想将图片添加到菜单栏链接中，请使用带有:hover属性的CSS 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);
})

如果这些指针都没有为您提供解决方案，请在您的问题中添加更多详细信息，以及您尝试过的代码。

Answer 2

好的，我已经把它弄清楚了。在css中使用z索引，我得到了这个html工作方式，所以“徽标”图像会在悬停时淡入淡出。

<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>

悬停文本图像

2 个答案: