javascript - 在css悬停中定位第二个 child

HTML片段

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

的CSS

.linkage, .cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.linkage { z-index: 10; }

.cover {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.35s ease;
}

.test {
  position: absolute;
  z-index: 9;
  margin: 0 50%;
  opacity:0;
  transition: opacity 0.5s ease;
 }

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

链接占用了整个空间。它会在整个区域上创建一个超链接（z-sexed到顶部，以便将鼠标悬停在其他元素上不会破坏链接）

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

最佳答案

您可以将~用于常规兄弟姐妹。其中+用于下一个同级元素。

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

检查Fiddle