HTML/CSS/JavaScript/jQuery - クリック時のホバー効果を維持する

Question

コードを単純化するために、私はコンテナdivを持っています。コンテナdiv内にはimgとフォームがあり、いくつかの入力があります。コンテナdivの上にマウスを置くと、imgが消えて（視認性を変更するCSSを使用して）、フォームが表示されます。

私は、本質的に持っていることはこれです：div.form formのどの部分がクリックされた場合.container:hoverたら

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

は、.container:hoverスタイルが失われ、適用されますつまり、imgはフェードインしてフォームを覆い隠します。フォームの入力ボックスをクリックすることはできますが、imgはまだフェードインします。マウスを動かすと.container:hoverが再び適用され、テキストをボックスに入力できます。

私が気づいたことは、ノートパソコンの内蔵マウスボタンを使用してクリックすると発生します。外付けのマウスやタッチスクリーンデバイスを使用しても、これは起こりません。この問題を解決する方法がわかりません。私はちょうどホバースタイルが失われることなくフォームをクリックできるようにしたい。これをしようと

Answer 1

：

#No2 { 
visibility: hidden; 

}

#No1:hover { 
background: red; 

}

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

}

Answer 2

ブラウザからキャッシュされたデータを削除してみてください。時には奇跡を起こす！