Question

The jquery code below does exactly what I want it to do on hover. However, I need it to work in the following way:

if a user hovers over #altimgX (for example) the black border appears. I want this border to stay until ‘#altimgY’ is hovered; at that time, I want to remove the border from #altimgX.

I tried using ‘mouseleave’ but this does not solve my problem since I want the current #altimg border to stay until another #altimg element is hovered.

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

HTML code snippet

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

I appreciate any help any help in this regard.

thank you

Answer 1

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

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

In the hover function for each of the elements, you just have to remove the borders first, then only set it for the one you want.

Also, a fiddle: http://jsfiddle.net/EYgpj/