aktive Eingabemöglichkeit bei Mauszeiger über das Bild

Question

Ich habe eine Dateieingabe in HTML und relativ zu Bild I, die ausgeblendet ist, bis ich nicht die Maus auf dem Bild schweben, aber dieser Eingangstyp funktioniert nicht ich möchte machen Diese Eingabe funktioniert, wenn ich darauf klicke.

<!-- 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 für dieses

.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

versuchen, eine versteckte Option hinzuzufügen, die Ihre Datei-Upload-Feld steuert zeigt:

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

und die CSS für sie:

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

überprüfen Sie diese Geige: https://jsfiddle.net/wws701q1/