在懸停li上更改「滑塊」中的圖像

我試圖創建一個「滑塊」，當鼠標懸停在li元素上時更改圖像。如果你點擊下面的鏈接，你可以看到我的意思。在懸停li上更改「滑塊」中的圖像

http://www.ing.nl/particulier/

<div id="infobyimage"> 
<div class="nav-blocks"> 
    <ul class="nav"> 
     <li> Geschilderd huis</li> 
     <li> Steiger</li> 
     <li> Houtrot pillen</li> 

    </ul> 
</div> 
<div class="slider"> 
<ul> 
    <li><img src="images/DSC00742-slide.png" alt="Geschilderd huis"/></li> 
    <li><img src="images/DSC00752-slide.png" alt="Geschilderd huis"/></li> 
</ul>

在HTML上面你可以看到，我想要達到相同的鏈接。有人可以解釋如何用jQuery或CSS來做到這一點？

謝謝。

來源

2013-06-29 luukgruijs

我試圖與顯示無和懸停變化圖像修正這個顯示塊。但總是需要在屏幕上顯示一個圖像，所以它不適合我 – luukgruijs

你必須要改變，例如，如果您想爲懸停在一個元素的功能，你會做的元素做了.hover(function(){//content});：

$('.element').hover(function(){ 
$('.another_element').fadeOut(100); 
});

這個功能說，當你將鼠標懸停在一個div有一個元素類，它使另一個div在100毫秒時具有另一個元素.fadeOut()的類，並使另一個元素0的不透明度。儘管您需要添加一個ajax文件，但是JQuery的這個片段仍然可以工作

來源

2013-06-29 18:37:21 Hive7

也許這會幫到你Demo

我改變img attribute當我懸停特定li即

$("ul li:nth-child(1)").hover(
function() {  
    $('#changeImage').attr('src','source'); 
});

來源

2013-06-29 18:47:59

在懸停li上更改「滑塊」中的圖像

回答

相關問題