イメージをクリックしたときに、カーソルがイメージ自体の上になくてもロールオーバー状態が維持されるように、イメージを (ロールオーバー/ホバー状態で) コーディングする方法を考えています。また、以前にクリックされた可能性のある他の .sibling<img>を非ロールオーバー状態に戻します。私が使用しているコードは次のとおりです。
jquery
$('img').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
});
html
<img id="button-all" src="images/button-all.png" data-rollover="images/button-all-rollover.png" />
<img id="button-adverts" src="images/button-adverts.png" data-rollover="images/button-adverts-rollover.png" />
<img id="button-musicvideos" src="images/button-musicvideos.png" data-rollover="images/button-musicvideos-rollover.png" />
<img id="button-films" src="images/button-films.png" data-rollover="images/button-films-rollover.png"/>
そのため、現在、画像にカーソルを合わせると (ロールオーバー)、データ ロールオーバー src にスワップされます。しかし、画像がクリックされたとき（jqueryコマンドのボタンであるため）、画像のsrcをdata-rollover srcと交換して、カーソルが画像の上に置かれなくなったときにdata-rollover srcの状態になるようにします残ります。これに加えて、元の src パスを使用して元の (非データ ロールオーバー) 状態に戻すには、以前にクリックした画像が必要です。
1) ロールオーバー イメージ。データ ロールオーバー状態を示します (既にクリックされている場合を除き、データ ロールオーバー状態にロールオーバーしても変化しません)。
2) 画像をクリックすると、src が data-rollover src にスワップされます
3) 他のすべての .sibling イメージは元の src 状態に戻ります。
うまくいけば、これは理にかなっています！ありがとう！