html - 将鼠标悬停在图片上时激活输入选项

Question

我有一个 HTML 格式的文件输入，并且与图片 I 相关，它是隐藏的，直到我没有将鼠标悬停在图片上，但是这种输入类型不起作用我想在我单击它时使该输入起作用。

<!-- user profile-->
<div class="row userprofile">
  <img class="user-image img-responsive" ng-src="http://localhost:8000{{imageurl}}" alt="{{username}}"  >
  <div class="col-md-4">
     <form  method="POST" enctype="multipart/form-data" action="http://localhost:8000/uploadimage" id="form" >
      <input type="file" name="image" onchange="javascript:document.getElementById('form').submit();" class="form-control upload ">
     </form>
  </div>
</div>

这个的CSS

.userprofile {


  position: relative;
    width: 400px;
    height: 200px;
    margin:1%;
}

.user-image{
    margin:1%;
    width:300px;
    height:250px;
    position:relative;
}
.col-md-4{
    position: absolute;
    top: 110%;
    right:40%;
    width: 200px;
    visibility:hidden;
}

.user-image:active + .col-md-4{
    visibility:visible;
}

Answer 1

尝试添加一个隐藏的复选框来控制显示您的文件上传字段:

<!-- user profile-->
<div class="row userprofile">
<input type="checkbox" id="activate">
<label for="activate"><img class="user-image img-responsive" ng-src="http://localhost:8000{{imageurl}}" alt="{{username}}"  ></label>
  <div class="col-md-4">
     <form  method="POST" enctype="multipart/form-data" action="http://localhost:8000/uploadimage" id="form" >
      <input type="file" id="file" name="image" onchange="javascript:document.getElementById('form').submit();" class="form-control upload ">
     </form>
  </div>
</div>

和它的CSS:

.userprofile {
    position: relative;
    width: 400px;
    height: 200px;
    margin:1%;
}

.user-image{
    margin:1%;
    width:300px;
    height:250px;
    position:relative;
}
.col-md-4{
    right:40%;
    width: 200px;
    opacity: 0;
}
#activate {
  display: none;
}
#activate:checked ~ .col-md-4 {
    opacity: 1;
}

看看这个 fiddle :https://jsfiddle.net/wws701q1/