Question

我有一个HTML格式的文件输入，相对于图片我是隐藏的，直到我没有将鼠标悬停在图片上，但是这个输入类型不起作用我想在点击它时使输入工作。< / p>

<!-- 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 for this

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

看看这个小提琴：https://jsfiddle.net/wws701q1/

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

1 个答案: