为什么当我在 DP 框中移动鼠标光标时，背景会在悬停时闪烁答案

【问题标题】：Why background is blinking on hover when I move mouse cursor in DP box为什么当我在 DP 框中移动鼠标光标时，背景会在悬停时闪烁
【发布时间】：2015-12-31 05:35:43
【问题描述】：

我正在尝试为其中包含用户个人资料图片的用户创建一个 DP 框，在图像悬停时会出现一个编辑个人资料图片链接，但它不起作用。当我将鼠标悬停在图像上时，它会闪烁并且链接显示不正确。

这里是codepan链接click here

@import url(https://fonts.googleapis.com/css?family=Roboto);
 body {
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
}
.dp {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
  overflow: hidden;
  position: relative;
}
.edit-dp a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 130px;
  background-color: rgba(0, 0, 0, .9);
  text-align: center;
  transition: all .2s ease-in-out;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  display: none;
}
.dp img:hover ~ .edit-dp a {
  display: block;
}

<div class="dp">
  <img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
  <div class="edit-dp">
    <a href="#">Edit Image</a>
  </div>
</div>

【问题讨论】：

你在寻找类似JSFiddle的东西吗？

标签： html css hover css-transitions

【解决方案1】：

闪烁故障是因为display: block 对image 而不是容器div 的:hover 影响。

因为每次您在图像上:hover 时，您最终都会对其进行编辑，因此您可以将display: none 设置为opacity: 0 而不是:hover，您可以将其设置为opacity: 1 并通过这样做你也会得到一个很好的过渡效果。

这里是片段，以获得更好的视图：

@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
}

.dp {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
  overflow: hidden;
  position: relative;
}

.edit-dp a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 130px;
  background-color: rgba(0, 0, 0, .9);
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.dp:hover .edit-dp a {
  opacity: 1;
}

<div class="dp">
  <img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
  <div class="edit-dp">
    <a href="#">Edit Image</a>
  </div>
</div>

【讨论】：

很棒的解决方案。你真是个天才。
@RahulKashyap 很高兴为您提供帮助 :)
感谢@vivekkupadhyay，你拯救了我的一天。

【解决方案2】：

解决方案 1：

使用下面的css会让你的效果很好。

.dp:hover > .edit-dp a{
    display: block;
}

在 div 而不是图像上制作悬停效果

@import url(https://fonts.googleapis.com/css?family=Roboto);
 body {
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
}
.dp {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
  overflow: hidden;
  position: relative;
}
.edit-dp a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 130px;
  background-color: rgba(0, 0, 0, .9);
  text-align: center;
  transition: all .2s ease-in-out;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  display: none;
}
.dp:hover > .edit-dp a{
    display: block;
}

<div class="dp">
  <img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
  <div class="edit-dp">
    <a href="#">Edit Image</a>
  </div>
</div>

Working Codepen

解决方案 2：

另一种解决方案是在悬停时使用pointer-events:none;。

.dp img:hover ~ .edit-dp a{
    display: block;
  pointer-events:none;
}

Working Codepen

【讨论】：