在 CSS 悬停中定位第二个孩子答案

【问题标题】：targeting 2nd child in css hover在 CSS 悬停中定位第二个孩子
【发布时间】：2015-05-28 07:19:05
【问题描述】：

HTML sn-p

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

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

【问题讨论】：

你可以在小提琴中更新并在可能的情况下提供链接
将两个当前 div 元素组合到另一个父 div 中，将其与 a 相邻，并使用 + 选择器定位它。

标签： javascript jquery html css

【解决方案1】：

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

.linkage:hover ~ .cover{
}

或

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

【讨论】：

【解决方案2】：

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

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

查看Fiddle

【讨论】：

【解决方案3】：

这将解决您的问题：

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

一般来说，

元素+元素

例如 div + p

说明：选择所有紧跟在“div”元素之后的“p”元素
元素1~元素2

例如 p ~ ul

说明：选择前面有“p”元素的每个“ul”元素

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

【讨论】：