アクティブ入力オプション画像上にマウスを置く

Question

画像にマウスを置かない限り隠されているファイル入力がHTMLで表示されますが、この入力タイプは機能しません。私がそれをクリックすると、その入力作業。

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

この

.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

ためのCSSは、あなたのファイルアップロードフィールドを示す制御隠されたチェックボックスを追加しよう：

<!-- 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/