CSS / JQuery 边框

Question

下面的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>

我很感激您在这方面提供的任何帮助。

谢谢你。

- AnchovyLegend

Answer 1

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

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

在每个元素的悬停函数中，您只需要先删除边框，然后仅为要设置的边框添加样式。

此外，还有一个JSFiddle演示：http://jsfiddle.net/EYgpj/

- Imp

Answer 2

创建一个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");
    });
});

- fhugas

Answer 3

首先，您应该根据类而不是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');
}

- Will Demaine

Answer 4

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

});

- Venice

---

嗨，感谢您的回复。然而，这只在鼠标悬停时应用边框... 边框不会保留，直到另一个altimg元素悬停，就像我需要的那样。 - AnchovyLegend