CSS / JQuery border

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/

Answer 2

Create a class in CSS

over { border:3px solid #000 }

Then give all the images a class name like hoverimage for example

Then add this jQuery to your code

$(document).ready(function(){

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

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

        // Add border to this image
        $(this).addClass("over");
    });
});