javascript - 悬停在 "slider"中更改图像

Question

我正在尝试创建一个“ slider ”，当鼠标悬停在 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 上时，它会在 100 毫秒时生成另一个具有另一个元素类 .fadeOut() 的 div 并使不透明度另一个元素 0。要使 JQuery 的这段代码正常工作，您需要添加一个 ajax 文件