HTML/CSS/JavaScript/jQuery - Hover-Effekt auf Klick

Question

Um meinen Code zu vereinfachen, habe ich ein Container div. Innerhalb des Containers ist div ein img und ein Formular mit einigen Eingaben. Wenn Sie den Mauszeiger über den Container div bewegen, wird der IMG ausgeblendet (mit css wird die Sichtbarkeit geändert) und das Formular wird angezeigt.

Was im Wesentlichen ist, ich habe dies:

HTML

<div class="container"> 
    <div class="img"><img src="/img/example.jpg"></div> 
    <div class="form"><form>...</form></div> 
</div> 

CSS

.img { 
     opacity: 1; 
     transition: ease 0.3s; 
} 
.container:hover .img { 
     opacity: 0; 
    } 

Sobald .container:hover angewandt wird, wenn ein Teil der div.form form geklickt wird, die .container:hover Stil verloren, dh der IMG blendet wieder ein und verdeckt die Form. Ich kann auf die Eingabefelder des Formulars klicken, aber der IMG wird immer noch eingeblendet. Wenn ich meine Maus bewege, wird .container:hover erneut angewendet und ich kann meinen Text in die Box eingeben.

Was ich bemerkt habe ist, dass dies nur passiert, wenn ich mit den eingebauten Maustasten auf meinem Laptop klicke. Wenn ich meine externe Maus oder ein Touchscreen-Gerät verwende, passiert das nicht. Ich bin mir nicht sicher, wie ich dieses Problem beheben kann. Ich möchte nur auf das Formular klicken können, ohne dass der Hover-Stil verloren geht.

Answer 1

dieser Versuch:

#No2 { 
visibility: hidden; 

}

#No1:hover { 
background: red; 

}

#No1:hover + #No2 { 
visibility: visible; 

}

Answer 2

Versuchen zwischengespeicherten Daten aus dem Browser löschen. Arbeitet manchmal Wunder !!