將鼠標懸停在圖片上的主動輸入選項

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

看看這個小提琴：https://jsfiddle.net/wws701q1/