6

以下の jquery コードは、ホバー時に実行したいことを正確に実行します。ただし、次のように動作する必要があります。

ユーザーが #altimgX (たとえば) にカーソルを合わせると、黒い境界線が表示されます。「#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>

この点で何か助けていただければ幸いです。

ありがとうございました

4

4 に答える 4

21 
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/

于 2012-04-28T15:00:10.167 に答える
1

CSS でクラスを作成する

over { border:3px solid #000 }

次に、すべての画像に次のようなクラス名を付けhoverimageます

次に、この jQuery をコードに追加します

$(document).ready(function(){

    $("hoverimage").hover(function() {

        // Remove border for all images
        $("over").removeClass("over");

        // Add border to this image
        $(this).addClass("over");
    });
});
于 2012-04-28T15:42:54.373 に答える
0

現在ホバーされている要素を格納する変数を作成します。ただし、これらの値にアクセスするには、おそらくクラス参照を使用する必要があります。ex $(".altImg").

var currentHover = '';
$("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5").hover(function(){

    $(this).css('border', '3px solid black');

    if (currentHover != '')
    {
       $("#" + currentHover).css('border', '0px');
    }

    currentHover = $(this).attr('id');

});
于 2012-04-28T15:01:15.780 に答える
0

まず、ID ではなくクラスに基づいて要素を選択する必要があります。

$(".altimg").hover(function() {
    //Remove border from all altimg classes
    $(".altimg").css('border','0px');
    //Set the border for this element.
    $(this).css('border','3px solid black');
}
于 2012-04-28T15:00:53.657 に答える