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

首先，您可能应该根据类而不是 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 回答
0

创建一个变量来存储当前悬停的元素。不过，您可能应该使用类引用来访问这些值。例如 $(".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 回答