悬停文本图像
问题描述：
我有一个常规的水平菜单栏。我想知道在鼠标悬停的情况下是否有可能使图像与文本重叠？我有一个恐怖网站，我正在处理这个网站，并且我认为，当鼠标悬停在菜单栏上的链接上方时，出现血腥的手印会很酷。我知道这是可能的，因为我以前见过类似的东西，但我需要帮助才能把它拉开。提前致谢。悬停文本图像
到首页的第一个链接是我想在悬停时叠加在文本上的图像。
<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>
答
由于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);
})
如果这些指针都不能为您提供解决方案，请为您的问题以及您尝试的代码添加更多详细信息。
答
好吧我已经想通了我自己。在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>
那你试试这么远吗？没有任何代码很难帮助你。 – smdsgn
我甚至不知道从哪里开始。我已经有一个工作菜单栏，我只想知道是否可以将它添加到已存在的菜单中。 – Joby