jQuery將鼠標懸停在文本上以顯示淡入淡出的圖像

我現在遇到了導航問題，我試圖讓內聯列表顯示類似帶淡入淡出的下劃線的圖像。jQuery將鼠標懸停在文本上以顯示淡入淡出的圖像

目前我有整個李褪色進出，包括文本。我只想讓圖像在文本下淡入淡出。我不是最好的jQuery，它是目前的教程組合。

HTML：

<nav> 
    <ul> 
     <li><a href="">home</a></li> 
     <li><a href="">what we do</a></li> 
     <li><a href="">our work</a></li> 
     <li><a href="">contact us</a></li> 
     <li><a href="">blog</a></li> 
    </ul> 
</nav>

CSS：

nav ul li{ 
margin: 0 0 0 22px; 
padding: 0 0 20px; 
display: inline; 
background: url(../img/3bullets.png) no-repeat center bottom; 
} 
nav ul li a{ 
color: #fff; 
font-family: Heiti TC, Tahoma, Verdana; 
font-size: 21px; 
letter-spacing: -0.5px; 
text-decoration: none; 
}

JS：

$(document).ready(function(navigationhover){ 
    $("nav ul li").fadeTo("slow", 0.1); // Sets the opacity to fade down when the page loads 
    $("nav ul li").hover(function(){ 
     $(this).fadeTo("slow", 1.0); // Sets the opacity on hover 
    },function(){ 
     $(this).fadeTo("slow", 0.1); // Sets the opacity on mouseout 
    }); 
});

任何幫助將非常感激，因爲這已經讓我卡住了一段時間！

謝謝。

來源

2011-06-07 Gareth

它工作在FF但不是在IE瀏覽器。看看這個例子，猜你需要一個額外的條件IE瀏覽器http://jquery.malsup.com/fadetest.html – 2011-06-07 19:39:25

由於錨標籤是李的孩子，它會與它的父母淡出，你有沒有考慮添加hr元素給李？

<ul> 
     <li><a href="">home</a><hr></li> 
     <li><a href="">what we do</a><hr></li> 
     <li><a href="">our work</a><hr></li> 
     <li><a href="">contact us</a><hr></li> 
     <li><a href="">blog</a><hr></li> 
    </ul>

CSS：

nav ul li h2{ 
background: url(../img/3bullets.png) no-repeat center bottom; 
}

JS：

$(document).ready(function(navigationhover){ 
    $("nav ul li h2").fadeTo("slow", 0.1); // Sets the opacity to fade down when the page loads 
    $("nav ul li").hover(function(){ 
     $('h2', this).fadeTo("slow", 1.0); // Sets the opacity on hover 
    },function(){ 
     $('h2', this).fadeTo("slow", 0.1); // Sets the opacity on mouseout 
    }); 
});

編輯：它的工作原理，demo

來源

2011-06-07 19:32:01 Trey

我會給這個去，謝謝 – Gareth 2011-06-07 19:42:38

乾杯trey，雖然這並沒有完美的第一次工作幫助我解決問題！謝謝。 [演示]（http://jsfiddle.net/uus9h/），如果複製並將圖像添加到hr背景，則可以運行。 – Gareth 2011-06-07 21:28:16

爲了正確理解你的問題，你想淡出你在css中設置的背景嗎？

來源

2011-06-07 19:29:46 kinakuta

嗨，是的..我知道我可能需要改變結構有點，但我不知道最好方式去了解它。 – Gareth 2011-06-07 19:41:55

jQuery將鼠標懸停在文本上以顯示淡入淡出的圖像

回答

相關問題