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

Question

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

这是codepan link 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>

Answer 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

方案二：

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

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

Working Codepen

Answer 2

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

因为每次 :hover 在图像上你最终都会编辑它，所以你可以将它设置为 opacity: 0 而不是 display: none 而在 :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>

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

Why background is blinking on hover when I move mouse cursor in DP box

html

css

hover

css-transitions