HTML、CSSの記述でマウスオーバーで画像を変える方法

HTMLのDiv、id、Class、HOVERの記述の質問です。

左側に○、右側に□の画像を配置、
通常は、「○■」(左側が光ってONの状態)

この時、マウスを■に重ねた時だけ□に変わるが、マウスを○に重ねても反応させない。
■の上でクリックすると以下のようになる。
「●□」(左の○が暗くなりOFF、右側の□が光ってONの状態)
今度は、マウスを●に重ねた時だけ○に変わるが、マウスを□に重ねても反応させない。
このように片方をONにするともう片方がOFFになるスイッチの様な動きをさせたいのですが、
HTMLファイルとCSSファイルにどんな記述をすれば実現できるでしょうか？

文中では以下の記号とファイル名で対応していますが実際には画像データです。
● = left.png
○ = left_on.png
■ = right.png
□ = right_on.png

No.1 回答者： amanojaku6 回答日時： 2018/11/03 09:45

JavaScriptなら可能です(下記ソースをコピペし、表示してみて下さい)。

JavaScripデモ：MouseEvent001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …