Question

我有一个问题，请参阅我的代码

<style>
.box {width: 100px; height: 100px; background-color: red;}
.box_second {width: 200px; height: 100px; background-color: blue; display: none;}
.box:hover ~ .box_second {display: block;}
.other {width: 100%;}
</style>

<div class="box"></div>
<div class="other">
Some other content
Some other content
Some other content
</div>
<div class="box_second">Please click <a href="next">me</a> and I will show you a secrea.</div>

我的问题是当我将鼠标从.box div移动到.box_second时，第二个div消失（.box_second），当我将鼠标从第一个div移动到第二个div或.other div时，我怎么能做另一个规则来显示.box_second？

这是js小提琴： http://jsfiddle.net/LLrcE/

Answer 1

从@Notulysses的使用包装器（外部div）的想法，我已经调整它以使其几乎完美地工作。我打算在他的回答中发布jsfiddle作为评论，但他之前已经删除了他的回答。因此，我想将其发布在答案中，以帮助您和其他可能遇到类似问题的人。

使用外部容器具有如下非常有趣的效果：当然，您必须将外部容器的大小设置为等于第一个框的大小（红色框），但是当弹出一些子元素时out（例如通过悬停在第一个框上并且应用了样式display:block），我们可以通过将鼠标悬停在所有子元素上来保持容器的:hover状态，包括弹出的元素，甚至包括所有子元素之间的中间空间（尽管悬停在这些子元素上之前不起作用）。这样我们就可以保持弹出的元素显示，即使鼠标移出第一个框，但鼠标应该在其中一个子元素上。在这种情况下，条件几乎可以接受，因为当您将鼠标从第一个框移动到第二个框直线时，鼠标当然将在其中一个中间子元素上（包括空格）在子元素之间）因此我们有机会保持显示第二个框，直到鼠标移出外部div。

以下是代码详情：

<强> HTML ：

<div class="outer">
  <div class="box"></div>
    <div class="other">
      Some other content
      Some other content
      Some other content
    </div>
  <div class="box_second">Please click <a href="next">me
  </a> and I will show you a secrea.</div>
</div>

<强> CSS ：

.outer {
  width:100px;
  height:100px;
  border:1px solid black;
}
.outer:hover .box_second {display: block;}
.outer:hover * {
  pointer-events:auto;
}
.other {
  width: 300%;
  pointer-events:none;
}

注意：pointer-events仅适用于IE 11。

伪div css鼠标悬停适用于其他div

1 个答案:

Demo.