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()的类，并使另一个元素的不透明度为0。虽然你需要添加一个ajax文件

，但要使用这个JQuery片段

Answer 2

也许这会对您有所帮助 Demo

当我悬停特定img attribute，即

时，我更改了li

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

在悬停li上更改“滑块”中的图像

2 个答案: