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

Imp · Accepted Answer · 2012-04-28 15:00:10Z

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/

fhugas · Accepted Answer · 2012-04-28 15:42:54Z

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"); }); });

Will Demaine · Accepted Answer · 2012-04-28 15:00:53Z

First of all, you should probably be selecting the elements based on a class rather than an 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'); }

Venice · Accepted Answer · 2012-04-28 15:01:15Z

Create a variable to store the currently hovered element. You should probably be using a class reference to access these values though. ex $(".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'); });

Hi, I appreciate the response. However, this only applies the border on hover... the border does not stay until another altimg element is hover, like I need it to.

Collectives™ on Stack Overflow

CSS / JQuery border

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related