javascript - 如何在html中上传图片后显示按钮？

Question

我创建了一个 html 页面，其中包含图像和相关控件，例如编辑、删除和添加按钮。目的是默认情况下您必须仅显示加号图标，上传图像后隐藏加号按钮并显示编辑和删除按钮。但现在的问题是，当悬停图像时，所有控件都会同时显示，并且很难用鼠标单击删除或编辑按钮。如何在 html 中上传个人资料图片后显示编辑和删除按钮，以及当有默认图片或同一 div 中没有图片时如何显示加号图标。 谁能帮我吗？

[默认个人资料图片][1]

[上传个人资料图片后][2]

请参阅附图。可以用jquery完成吗？

.profile_image {position: relative; padding: 0px 40px; margin-bottom: 40px;}
    .add_new_candidate {margin: 20px 10px;}
    .profile_img_ctrls {position: absolute; width: 100%; height: 100%; display: none;}
    .profile_img_ctrls a {background: #8aa2ad; border-radius: 50%; width: 20px;  height: 20px; float: left; text-align: center; color: #fff; margin-right: 15px;}
    .profile_add_picture {width: 30px !important; height: 30px !important; margin-top: -8px; position: relative; overflow: hidden;}
    .add_new_candidate input {margin-top: 45px; font-size: 20px; font-weight: bold;}
    .profile_add_picture input.upload {position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0);}
    .profile_add_picture i {font-size: 20px; padding-top: 5px;}

<div class="row">
                        <div class="add_new_candidate profile_image">
                        	<div class="col-md-3">
                            	<img class="img-responsive img-circle" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" >
                                <div class="profile_img_ctrls">
                                	<a href="#"><i class="fa fa-pencil"></i></a>
                                    <a class="profile_add_picture" href="#">
                                    	<i class="fa fa-plus"></i>
                                    	<input type="file" class="upload" />
                                    </a>
                                    <a href="#"><i class="fa fa-trash"></i></a>
                                </div>
                            </div>
                            
                            <div class="col-md-9">
                            	<input type="text" class="form-control" placeholder="Full name" >
                            </div>
                        </div>
                    </div>

Answer 1

只需使用 css 选择器即可。基本上将 default-image 类添加到默认图像，并在用户上传图像时将此类更改为 user-image 并使用下面的代码

<强>1。当有默认图片时

.profile_img_ctrls a{
    display: none
}
.default-image + .profile_img_ctrls .profile_add_picture {
   display: inline-block;
}

<div class="row">
    <div class="add_new_candidate profile_image">
        <div class="col-md-3">
           <img class="img-responsive img-circle defaut-image" src="dist/img/avatar.png" >
           <div class="profile_img_ctrls">
               <a href="#"><i class="fa fa-pencil"></i></a>
               <a class="profile_add_picture" href="#">
                   <i class="fa fa-plus"></i>
                   <input type="file" class="upload" />
               </a>
               <a href="#"><i class="fa fa-trash"></i></a>
           </div>
      </div>
            
      <div class="col-md-9">
          <input type="text" class="form-control" placeholder="Full name" >
      </div>
   </div>
   </div>
</div>

<强>2。当用户更改图片时

.user-image + .profile_img_ctrls a {
    display: inline-block;
}

<div class="row">
   <div class="add_new_candidate profile_image">
       <div class="col-md-3">
           <img class="img-responsive img-circle user-image" src="dist/img/avatar.png" >
           <div class="profile_img_ctrls">
               <a href="#"><i class="fa fa-pencil"></i></a>
               <a class="profile_add_picture" href="#">
                   <i class="fa fa-plus"></i>
                   <input type="file" class="upload" />
               </a>
               <a href="#"><i class="fa fa-trash"></i></a>
           </div>
       </div>

       <div class="col-md-9">
           <input type="text" class="form-control" placeholder="Full name" >
       </div>
   </div>
  </div>
</div>