Question

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

以下是代码段链接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

解决方案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

Answer 2

闪烁故障是因为:hover对display: block而不是容器image的{{1}}效果。

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

这里有代码段以获得更好的观点：

＆＃13;

opacity: 1

＆＃13;

@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;
}

＆＃13;

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

2 个答案: