Question

当另一个不是父母的<div> <div>时，是否可以选择特定的:hover？

仅限HTML5 / CSS3，不含JS。

<section>
  <div id=first></div>
</section>

<section>
  <div class=second></div>
</section>

例如，我希望<div class=second>在<div id=first> :hover时显示。

Answer 1

这是可能的，但前提是两个元素具有相同的父元素使用element1 ~ element2 selector。例如：
HTML：

<div class="first">
    <!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
    <!-- content -->
</div>

CSS：

.first:hover ~ .second {
    /* styles */
}

如果您需要选择不具有相同父级的元素，则需要使用javascript。

Answer 2

这是实现这一目标的两种方法，点击添加a标记或悬停它有点棘手

＆＃13;

.second{
  display:none;
}

#second:target {
  display:block;
}

#first a{
  text-decoration:none;
  color:black;
}

.disp1:hover + .disp2{
  display:block;
}

.disp2{
  display:none;
}

＆＃13;

<section>
  <div id="first"><a href="#second" >div one</a></div>
</section>

<section>
  <div id="second" class="second">div two</div>
</section>

<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>

＆＃13;

当另一个不是父母的<div>时，是否可以选择特定的<div>：仅悬停在CSS3中？

2 个答案: