Javascript 以css悬停中的第二个孩子为目标

HTML代码段

        <a href="<?php the_permalink(); ?>" class="linkage"></a>
        <div class="test"><h1>test</h1></div>
        <div class="cover"></div>

连杆机构占据整个空间。它会在整个区域上创建一个超链接（z-sexed到顶部，以便悬停在其他元素上不会中断链接）

---

将鼠标悬停在“链接”上可使“测试”的不透明度可见。我希望它也能使“cover”的可见性可见，但我似乎无法将其作为目标（因为它不是我直接的子对象或与“linkage”相邻的对象）。

您可以使用next all sibbins

.linkage:hover ~ .cover{
}

或

---

您可以对一般同级使用

~

。其中，

+

用于下一个同级元素

.linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}

---

选中

这将解决您的问题：

.linkage:hover + .test, .linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}

总的来说

元素+元素

例如div+p

解释：选择紧跟在“div”元素之后的所有“p”元素

元素1~元素2

例如p~ul

解释：选择前面有“p”元素的每个“ul”元素

---

有关各种选择器的更多信息，请访问。

如果可以将另一个父级

div

中的两个当前

div

元素组合在一起，请在

a

附近进行更新并提供链接，然后使用

+

选择器将其作为目标。

.linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}

.linkage:hover + .test, .linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}