在懸停按鈕上的“滑塊”中更改圖像

Question

我正在嘗試創建一個“滑塊”，以便將鼠標懸停在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來執行此操作嗎？

謝謝。

Answer 1

您需要執行.hover(function(){//content}); 在要更改的元素上，例如，如果要使用一個懸停在一個元素上的函數，可以執行以下操作：

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

此函數表示，當您將鼠標懸停在具有一類元素的div上時，它將使另一個div在100毫秒處具有一類.fadeOut() ，並使opacity的另一個元素為0。 JQuery可以工作，盡管您需要添加一個ajax文件

Answer 2

也許這會幫助您演示

我改變img attribute時，我將鼠標懸停特別li即

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