html - 悬停 div 导致滞后

Question

我想悬停一个 div。当我用鼠标进入 div 时滞后。内容显示不清晰。这是我的 html 和我的 css

.unshow-txt:hover,
.unshow-txt:focus,
.unshow-txt:active {
  display: none;
}

.show-txt {
  display: none;
  font-size: 18px;
}

.box:hover .show-txt,
.box:focus .show-txt,
.box:active .show-txt {
  display: inline;
}

<div class="box">
  <div class="unshow-txt">
    <div class="middle">
      <div class="circle-o">
        <i class="fa fa-eye fa-3x" aria-hidden="true"></i>
      </div>
    </div>
    <h2 class="h2-bigger text-center">Vorausschauend</h2>
  </div>
  <div class="show-txt">
    <p>Some text</p>
  </div>
</div>

Answer 1

你想要这个？ See this fiddle

我使用 siblings CSS 选择器来显示文本:

.unshow-txt:hover ~ .show-txt,
.unshow-txt:focus ~ .show-txt,
.unshow-txt:active ~ .show-txt {
  display: inline;
}