javascript - 在鼠标悬停时更改“滑块”中的图像

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

You need to do a .hover(function(){//content}); on the element that you want to change for example if you wanted a function for hovering over one element you would do:

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

This function says that when you hover over a div that has a class of element, it make another div that has a class of another-element .fadeOut() at 100 milliseconds and make the opacity of another-element 0. For this snippet of JQuery to work though you need to add an ajax file

Answer 2

也许这会帮助你演示

我改变了img attribute当我特别悬停li时

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