Наведите текст на изображение

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 прокомментировал свой вопрос, без кода вы уже пробовали, то трудно для других, чтобы полностью понять, что вы пытаетесь достичь. Несмотря на это, предполагая, что я правильно понимаю ваш вопрос, я могу предоставить вам пару указателей.

Если вы просто хотите, чтобы добавить изображение в вашу ссылку в строке меню, когда он парил над, использовать 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); 
}) 

Если ни один из этих указателей обеспечивают решение для вас, пожалуйста, добавить больше деталей к вашему вопросу, а также код, который вы уже пробовали.

Answer 2

Хорошо, я понял это самостоятельно. Используя индекс z в css, я получил этот 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>