java脚本悬停效果一起反应
java脚本悬停效果一起反应
提问于 2018-09-13 05:08:27
我还是个编程新手，而且我还在不断学习。我目前正在尝试建立我的第一个网页，但我遇到了一个障碍。
我从W3school获得了一些悬停效果，并将它们应用于两个图像按钮链接。我在两个不同的列中创建了两个不同的"Raw HTML“条目。当我加载网页时，按钮总是反应在一起。如果我将鼠标悬停在一张图片上，就会触发另一张图片的效果。我有一个类似的东西，我有两个自动播放画廊，当我把它们都放到页面上时，它们相互冲突。
我需要什么样的编码逻辑才能分离元素？
这里是有问题的站点：http://centralia2050.dreamhosters.com/gallery-links/
回答 1
Stack Overflow用户
发布于 2018-09-13 05:39:52
产生悬停效果的代码如下：
.container:hover .middle {
opacity: 1;
}这实际上是说:当鼠标悬停在具有类.container的元素上时，将所有具有类.middle的子元素的opacity属性设置为1。
因为有一个包含两个.middle元素的.container元素，所以当将鼠标悬停在该.container上时，这两个元素的不透明度都设置为1。
问题的解决方案是在选择器上使用:hover伪类，该选择器指定只包含一个.middle元素的元素。
您可能希望仅在将鼠标悬停在#gallery1和#gallery2元素上时淡入.middle元素，因此您可以像这样更改代码：
#gallery1:hover .middle, #gallery2:hover .middle {
opacity: 1;
}更好的做法是创建一个.gallery-container类并将其应用于#gallery1和#gallery2元素。然后使用以下代码片段：
.gallery-container:hover .middle {
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52303510
复制相关文章
相似问题