Javascript 鼠标悬停时显示其他图像时出现淡入淡出效果问题

我正在尝试将鼠标悬停时的图像更改为其他具有淡入淡出效果的图像。我想我做的每件事都是正确的，但它不起作用，我想首先出现的图像被隐藏了，但我不明白为什么会发生这种情况，因为我认为代码是正确的！ 你看到代码中有什么问题吗

我的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>

$('#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
}

---

相同的ID使用不同的元素，如

循环新闻

用于

文章

元素

隐藏
用于
img
元素

显示
用于
img
elemnt

id是唯一的。对于html中的一个元素，它只能使用一次。
有相同的ID用于不同的元素，例如

循环新闻
用于
文章
元素

隐藏
用于
img
元素

显示
用于
img
elemnt

id是唯一的。html中的一个元素只能使用一次。
问题是您有重复ID，而您不能有。您应该将它们更改为类，并改用
.className

您还需要有
位置：relative循环新闻
）上的code>，使隐藏图像的
位置：绝对
正常工作

.loop-news {
    position:relative;
}


另外，不要使用id
#body
，只需使用
元素，或者最好重命名为其他内容。在身体周围有一个
标签是没有意义的
问题是你有重复的ID，而你不能有。您应该将它们更改为类，并改用
.className

您还需要有
位置：relative循环新闻
）上的code>，使隐藏图像的
位置：绝对
正常工作

.loop-news {
    position:relative;
}


另外，不要使用id
#body
，只需使用
元素，或者最好重命名为其他内容。在正文周围有一个
标记是没有意义的
您的HTML似乎与您的CSS/jQuery不匹配。对不起，当我从这里传递代码时，我忘记了重要部分。谢谢你的回答！我现在更新它，我在这里有什么！您使用了两次相同id的
img
标记
show
，事实上还有另一个相同id，
hidden
和
loop news
您的HTML似乎与CSS/jQuery不匹配。对不起，当我从这里传递代码时，我忘记了重要部分。谢谢你的回答！我现在更新它，我在这里有什么！您使用相同id的
img
标记两次
show
，实际上还有其他相同id，
隐藏的
和
循环新闻
不可能将出现在悬停上的第二个图像以不透明度放置？透明？我正在尝试“不透明度：0.4”；但它不起作用。这样：@John23肯定可以让它不那么不透明。我将其应用于
.hidden
类谢谢，但我已经尝试过了，但这并不是我想要的..我希望图像是透明的，这样我就可以看到后面的另一个图像…你明白吗？@John23然后应用它来显示jQuery并将其更改为您设置的值。。。。不可能将出现在悬停上的第二个图像以不透明度放置？透明？我正在尝试“不透明度：0.4”；但它不起作用。这样：@John23肯定可以让它不那么不透明。我将其应用于
.hidden
类谢谢，但我已经尝试过了，但这并不是我想要的..我希望图像是透明的，这样我就可以看到后面的另一个图像…你明白吗？@John23然后应用它来显示jQuery并将其更改为您设置的值。。。。