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

悬停在＆＃39;链接＆＃39;使“测试”的不透明度变为“可见。我还希望它能够让人们看到＆＃39; cover＆＃39;同样可见，但我似乎无法瞄准它（因为它不是我指导孩子或与...相关联的＆＃39;）

Answer 1

您可以使用下一个所有兄弟姐妹

.linkage:hover ~ .cover{
}

或

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

Answer 2

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

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

检查Fiddle

Answer 3

这将解决您的问题：

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

一般来说，

元素+元素

例如 div + p

说明：选择紧跟在'div'元素之后的所有'p'元素
元素1〜element2的

例如 p~ul

解释：选择以'p'元素开头的每个'ul'元素

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

在css悬停中定位第二个孩子

3 个答案: