Question

我正在尝试将鼠标悬停的图像更改为具有淡入淡出效果的其他图像。我认为我做的一切都是正确的，但它不起作用，我想先出现的图像是隐藏的，但我不明白为什么会发生这种情况，因为我认为代码是正确的！您是否在代码中看到任何问题？

我的Html：

<section id="body-container">
    <div id="body">
        <div id="body-content">

            <article id="loop-news">   
                <img id="hidden">   
                <img id="show" src="images/image1.jpg"  />
                <h2>Title 1</h2>
                <p>Post 1</p>
            </article>

            <article id="loop-news">
                <img id="hidden">   
                <img id="show" src="images/image1.jpg"  />
                <h2>Title 2</h2>
                <p>Post 2</p>
            </article>
        </div>
    </div>
</section>

我的jQuery：

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

我的css：

#hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 160px;
    background: red;
    z-index: -1
}

Answer 1

问题是你有重复的ID，你不能拥有。您应该将它们更改为类并使用.className代替

您还需要在容器（position:relative;）上设置loop-news，以使position:absolute隐藏图片正常工作

.loop-news {
    position:relative;
}

Demo

此外，不要使用ID #body，只需使用<body>元素，或者最好重命名为其他内容。在身体周围加上<section>标签是没有意义的

Answer 2

有相同的ID正在使用不同的元素，如

loop-news article元素

hidden img元素

show img elemnt

id是唯一的。对于html中的元素，它只能使用一次。

在鼠标悬停时显示其他图像，并显示淡入淡出效果

2 个答案: