悬停的div导致滞后

Question

我想悬停一个div。当我用鼠标进入div ist lagging时。内容没有清晰显示。这是我的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

我使用兄弟姐妹CSS选择器来显示文字：

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

Answer 2

我建议在.box div中使用悬停效果。由于您在父级和子级中有悬停动画

，因此会发生错误

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;