Question

我在悬停时有一张图片应显示一个小铅笔图标来更改上传新图片。我是css的新手，我默认将图标的可见性设置为hidden。但是当我将悬停的可见性更改为visible时。它没有显示出来。

<div class="col-lg-3">
     <img id = "personal_profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
  <a href="#">
    <span id="upload_pic_icon">
          <label for="avatar" id="avatar_label">
               <i class="fa fa-pencil" aria-hidden="true"></i>
          </label>                        
    </span>
  </a>
       <form id="change_pic_form">
            <input type="file" name="avatar" id="avatar">                                
       </form>

  </img>
</div>

这是我的css

#upload_pic_icon{
    margin-left: 62%;
    margin-top: -25%;
    display: block;
    position: absolute;
    visibility: hidden;
}

#personal_profile_pic:hover #upload_pic_icon{
    visibility: visible;
}

我不明白该怎么做。

Answer 1

您需要使用+选择器，它会选择#upload_pic_icon之后立即放置的#personal_profile_pic

＆＃13;

#upload_pic_icon{
  margin-left: 62%;
  margin-top: -25%;
  display: block;
  position: absolute;
  visibility: hidden;
}
#personal_profile_pic:hover + #upload_pic_icon {
  visibility: visible;
}

＆＃13;

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
  <img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
  <a href="#" id="upload_pic_icon">
    <span>
          <label for="avatar" id="avatar_label">
               <i class="fa fa-pencil" aria-hidden="true"></i>
          </label>                        
    </span>
  </a>
  <form id="change_pic_form">
    <input type="file" name="avatar" id="avatar">
  </form>
</div>

＆＃13;

或者您可以在div中wrap img和edit以及hover上设置.wrap，然后使用display:none。

＆＃13;

.wrap {
  position: relative;
  display: inline-block;
}
.wrap #upload_pic_icon {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
}
.wrap:hover #upload_pic_icon {
  display: block;
}

＆＃13;

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
  <div class=wrap>
    <img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
    <a href="#" id="upload_pic_icon">
      <label class="fa fa-pencil" for="avatar" id="avatar_label">
      </label>
    </a>
  </div>
  <form id="change_pic_form">
    <input type="file" name="avatar" id="avatar">
  </form>
</div>

＆＃13;

Answer 2

你不应该在<img>标签内包装html内容，这在语法上是不正确的。

将所有内容放在图片标记之后，并使用+选择器在悬停时触发css。使用opacity代替visibility以获得更平滑的过渡。

<强> HTML：

<div class="col-lg-3">
  <img id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"/>
  <a href="#">
    <span id="upload_pic_icon">
      <label for="avatar" id="avatar_label">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </label>                        
    </span>
  </a>
  <form id="change_pic_form">
    <input type="file" name="avatar" id="avatar">                                
  </form>
</div>

<强> CSS：

#upload_pic_icon {
    opacity: 0;
}

#personal_profile_pic:hover + #upload_pic_icon {
    opacity: 1;
}

Answer 3

尝试从非常小的值更改不透明度，img可以被视为不可见，完全可见（1.0）。但是你的逻辑可能是错误的，因为没有任何意义可以悬停以前看不见的东西。

   cf ssh

Answer 4

非常简单这是解决方案

https://jsfiddle.net/dineshkanivu/uddv4y9z/

HTML

<div class="MyImage">
  <div class="penLayer">
  <img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/pencil-128.png"/>
  </div>
</div>

CSS

.MyImage{
background: url("http://gretchenrubin.com/wp-content/uploads/2013/09/big_small_.jpg");
 width: 350px;
height: 263px;
position:relative
}
.penLayer{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:none;

}
.penLayer img{width:60px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-top:-30px;
margin-left:-30px}

当前图片悬停时启用更改图片按钮

4 个答案: