Question

我有一个问题，我知道它很小，但是由于我的需要，我怀疑我何时将鼠标悬停在一个div上，我希望第二个div应该显示并再次删除光标，它应该隐藏如何使用CSS做到这一点

div 2将被隐藏，因此当将鼠标悬停在div上时，它应显示此div标签，然后再次将其悬停以将其隐藏，然后使用css将其隐藏

<div>
  <a href="javascript:void(0)">
    <div class="show-all-hover-zone" style="height: 212px;">
      <i class="fa fa-chevron-left" style="font-size:25px;color:darkslategrey;position:relative;top:97px;"></i>
    </div>
  </a>

  <div style="background-color:whitesmoke;padding: 3px;height:210px;width:0px;position:absolute;top:164px;display:none;" class="expand-menu1">

  </div>

Answer 1

以您的情况

a:hover ~.expand-menu1{ display: block !important; }

但是请不要使用内联。它可以更加优雅。例如：

HTML

<a class="hoverOnShow" href="javascript:void(0)">
    <div class="show-all-hover-zone">
        <i class="fa fa-chevron-left" ></i>
    </div>
</a>

<div class="expand-menu1">
</div>

CSS

.show-all-hover-zone{
  height: 212px;
}
.fa-chevron-left{
  font-size: 25px;
  color:darkslategrey;
  position:relative;
  top: 97px;
}
.expand-menu1{
  background-color:whitesmoke;
  padding: 3px;
  height: 210px;
  width: 0px;
  position:absolute;
  top: 164px;
  display:none;
}
.hoverOnShow:hover ~.expand-menu1{
  display: block;
}

使用CSS将鼠标悬停在另一个div标签上时如何显示隐藏的div标签

1 个答案: