javascript悬停效果一起反应

Posted 2021-04-06

我仍然是编码的新手，我正在学习。我正在尝试建立我的第一个网页，我遇到了麻烦。

我从W3school获得了一些悬停效果，并将它们应用到两个图像按钮链接。我将两个不同的“原始html”条目分成两个不同的列。当我加载网页时，按钮总是一起反应。如果我将鼠标悬停在一个图像上，则会触发另一个图像的效果。我有类似的东西，我有两个自动播放画廊，当我把它们都放在页面上时，它们互相冲突。

我需要什么编码逻辑才能分离元素？

这是有问题的网站：http://centralia2050.dreamhosters.com/gallery-links/

答案

负责悬停效果的代码如下：

.container:hover .middle {
    opacity: 1;
}

这基本上说：当将鼠标悬停在具有类.container的元素上时，将具有类opacity的所有子元素的.middle属性设置为1。

由于有一个.container元素包含你的两个.middle元素，当它们悬停在.container上时，它们的不透明度都设置为1。

您的问题的解决方案是在选择器上使用:hover伪类，该选择器指定仅包含一个.middle元素的元素。

你可能正在寻找的是只有当你的.middle和#gallery1元素悬停时才会淡入#gallery2元素，所以你可以像这样更改代码：

#gallery1:hover .middle, #gallery2:hover .middle {
    opacity: 1;
}

更好的是，创建一个类.gallery-container并将其应用于#gallery1和#gallery2元素。然后使用以下代码段：

.gallery-container:hover .middle {
    opacity: 1;
}