Question

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

我尝试one班级悬停然后一个类效果模糊和second div可见，但最闪烁的是如何解决这个问题如何停止闪烁。

我想停止Flicker悬停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

在您的代码中，hover in和hover out存在问题。

当鼠标悬停.one时，.two会显示并暂停从.one移除，因为.two位于one和cursor之间作为图层

现在根据条件.one:hover+.two {display: block;} .two隐藏，此过程无休止地运行。

为避免这种情况，您可以将父div中的两个div包装起来，并为其指定悬停状态。

＆＃13;

.root {
  width: 250px;
  border: 1px solid black;
  height: 250px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
}

.root:hover .one {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.root: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;
}

＆＃13;

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

＆＃13;

Answer 2

闪烁问题正在发生，因为当您将鼠标悬停在 .one div上时，会出现 .two div（ {{1} } ）并将hover css从 display: block 中删除，结果 .one div再次 .two 并且您的 display: none 悬停再次开始，此过程一次又一次地发生（永不结束过程）。

我建议您在 .one div中使用 .two div，然后应用悬停效果。检查下面的代码段

.one

.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 hover第二个div闪烁效果问题

2 个答案: