1. ホーム
  2. jquery

[解決済み] CSS / JQuery ボーダー

2022-02-27 22:02:10

質問

以下のjqueryのコードは、ホバー時に私が望むことを正確に行います。しかし、私はそれが次のように動作する必要があります。

にカーソルを合わせると、黒い枠線が表示されます。このボーダーは、'#altimgY' にカーソルを合わせるまで表示させたい。そのとき、#altimgX からボーダーを取り除きたい。

mouseleave' を使ってみましたが、これは私の問題を解決してくれません。なぜなら、現在の #altimg のボーダーを、別の #altimg 要素にカーソルを合わせるまで残しておきたいからです。

$("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5").hover(function(){
        $(this).css('border', '3px solid black');
});     

HTMLコードスニペット

<div id="altimg0" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg1" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg2" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg3" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg4" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg5" style="height:70px; width:70px;"> SOME IMAGE </div>

この点については、どのようなことでも結構ですので、ご協力をお願いします。

サンキュー

解決方法は?

var altimgs = $("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5");

altimgs.hover(function() {
    altimgs.css('border-width', '0');
    $(this).css('border', '3px solid black'); 
});

各要素のホバー機能では、まずボーダーを削除し、必要な要素にのみ設定すればいいのです。

また、いじわる。 http://jsfiddle.net/EYgpj/