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

Question

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

这是代码平移链接点击这里

@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

闪烁故障是因为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>

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

工作代码笔

解决方案2:

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

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

工作代码笔