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

Question

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 到顶部，以便悬停在其他元素上不会破坏链接)

将鼠标悬停在“链接”上会使“测试”的不透明度可见。我也希望它也使“封面”的可见性也可见，但我似乎无法定位它(因为它不是我的直接 child 或与“链接”相邻)

Answer 1

你可以使用下一个所有的 sibling

.linkage:hover ~ .cover{
}

或

.linkage:hover + .test + .cover{
}