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

SOME IMAGE

Accepted Answer

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

CSS / JQuery border

Solution

Problem