hover（CSS）で設定している背景を固定したい

背景のない画像（メイン画像）にマウスをhoverすると
bckgroundで設定されている画像が背景になる設定にしています。
なのでマウスのhoverをはずしてしまうと、背景画像は消えます。
メインの画像をクリックしたら、背景画像が固定されるようにしたいです。
JQueryで設定しようと思っているのですが、なかなか思う様にできません。
何か案がございましたら、教えていただけますでしょうか。
JQueryでなくてもかまいません。

--------------HTML------------------

    <ul>
      <li id="gu_btn"><img src="img/guimg5.png" alt=""></li>
      <li id="cho_btn"><img src="img/chokiimg4.png" alt=""></li>
      <li id="par_btn"><img src="img/paimg3.png" alt=""></li>
    </ul>

--------------CSS------------------

li{
text-align: center;
list-style-type:none;
display:table-cell;
cursor: pointer;
background-color:black;
}

li:hover{
background: url("../img/tayloricon2.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

li img{
width: 150px;
height:150px;
}

どうぞ、よろしくお願いいたします。

gpsoft

2021/04/26 05:17

> 背景画像が固定されるようにしたいです。「固定」というのは、 hover解除後も、背景画像が表示されたままになるようにしたい、ということですか? > JQueryで設定しようと思っているのですが、なかなか思う様にできません。そのコード(思うように動かなかったときのコード)を載せていただけると、回答が付きやすいかもしれませんよ。

TiffanyM

2021/05/02 01:12

その通りです。クリックした後にhoverしていた画像がそのまま表示されるようにしたいです。そうですよね！動かなかったコードを載せないとミスを発見できないですよね… 次回からは立ち往生してしまっている状態のコードを載せます。ご返信、アドバイスいただきありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

画像の交換は

Javascript
1  $('li').on('click',function(){
2    $(this).children('img').attr('src','img/xxxx.png') ;
3  });
4```で実装出来ますが、:hoverが生きているのでhover挙動もScriptにしたほうがイイかもしれませんね