html - div hover 第二个div闪烁效果问题

Question

注意:我尝试了与该主题相关的所有问题和答案。此外，我尝试了相关问题并尝试解决但没有成功。所以请仔细阅读我的问题。

我尝试将一个类悬停然后将一个类效果模糊并且second div可见但是一些最闪烁的是如何解决这个问题如何停止闪烁。

我想停止闪烁悬停div

注意: 请运行我的示例然后你能理解问题所在吗

代码

.root {
  width: 300px;
  border: 1px solid black;
  padding: 5px;
  height: 300px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  left: 5px;
}

.one:hover {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.one:hover+.two {
  display: block;
}

.two {
  display: none;
}

.changeoreditdiv {
  position: absolute;
  top: 58px;
  left: 87px;
  width: 150px;
}

.changeoreditdiv div {
  padding: 10px;
  width: 52px;
  height: 16px;
  border: 1px solid red;
  background: #ccc;
}

<div class="root">
  <div class="one">
    <img src="http://1u5ra23nlkv83fo2ig1vo38m.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Colorful-Apple-Wallpaper.jpg" width="100%" height="100%" />
  </div>
  <div class="two">
    <div class="changeoreditdiv">
      <div> Remove</div>
      <br>
      <br>
      <div> Change </div>
    </div>
  </div>
</div>

Answer 1

出现闪烁问题是因为当您将鼠标悬停在 .one div 上时，.two div 会出现(display: block) 和 hover css 从 .one 中移除，生成 .two div 再次是 display: none 并且您的 .one 悬停再次开始并且这个过程一次又一次地发生(永无止境的过程)。

我建议将 .two div 放入您的 .one div 中，然后应用悬停效果。检查下面的片段

.root {
  width: 300px;
  border: 1px solid black;
  padding: 5px;
  height: 300px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  left: 5px;
}

.one:hover img {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.one:hover .two {
  display: block;
}

.two {
  display: none;
}

.changeoreditdiv {
  position: absolute;
  top: 58px;
  left: 87px;
  width: 150px;
}

.changeoreditdiv div {
  padding: 10px;
  width: 52px;
  height: 16px;
  border: 1px solid red;
  background: #ccc;
}

<div class="root">
  <div class="one">
    <img src="http://1u5ra23nlkv83fo2ig1vo38m.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Colorful-Apple-Wallpaper.jpg" width="100%" height="100%" />
    <div class="two">
      <div class="changeoreditdiv">
        <div>Remove</div>
        <br>
        <br>
        <div>Change</div>
      </div>
    </div>
  </div>
</div>