Target multiple elements on Hover

Forum Moderators: not2easy

Message Too Old, No Replies

Target multiple elements on Hover

itsmejainh

8:59 pm on Jul 20, 2013 (gmt 0)

Hi,

I am trying to achieve a functionality where in I can target multiple div elements and move them to respective positions by hovering on one element.

Please refer this fiddle: [jsfiddle.net...]

Here, I have four elements - 1,2,3,4. When, I hover on element 1, I want remaining three elements to move to extreme left one below another.

I was able to move one element (2), but I couldn't stop that element at the desired position.

Please suggest.

Thank you.

JD_Toims

11:40 pm on Jul 20, 2013 (gmt 0)

I'd use jQuery + CSS rather than pure CSS personally.

$('#id_1').hover(function() {
$('#id_2').addClass("change_2_position");
$('#id_3').addClass("change_3_position");
$('#id_4').addClass("change_4_position");
}, function() {
$('#id_2').removeClass("change_2_position");
$('#id_3').removeClass("change_3_position");
$('#id_4').removeClass("change_4_position");
}
);

$('#id_2').hover(function() {
$('#id_1').addClass("change_1_position");
$('#id_3').addClass("change_3_position");
$('#id_4').addClass("change_4_position");
}, function() {
$('#id_1').removeClass("change_1_position");
$('#id_3').removeClass("change_3_position");
$('#id_4').removeClass("change_4_position");
}
);

etc.

* It would also be very easy to animate the position change/change back with .animate() rather than simply changing the class, but it was more than I felt like coding right now lol

itsmejainh

5:58 am on Jul 21, 2013 (gmt 0)

Thanks for the reply. Can you implement one hover for me. I am new to jQuery.

JD_Toims

6:49 am on Jul 21, 2013 (gmt 0)

Sure... I grabbed the info from your jsFiddle link and changed to classes rather than IDs because it's easier.

<style type="text/css">
.div1 {
width: 100px;
height: 100px;
position:absolute;
left: 150px;
top: 0px;
background-color:rgb(44,99,20);
color: white;
text-align: center;
vertical-align: text-top;
}
.div2 {
width: 100px;
height: 100px;
position:absolute;
left: 150px;
top: 105px;
background-color:rgb(91,18,18);
color: white;
text-align: center;
vertical-align: text-top;
}
.div3 {
width: 100px;
height: 100px;
top:0px;
position:absolute;
left: 255px;
background-color:rgb(0,119,119);
color: white;
text-align: center;
vertical-align: text-top;
}
.div4 {
width: 100px;
height: 100px;
position:absolute;
top:105px;
left:255px;
background-color:rgb(0,0,0);
color: white;
text-align: center;
vertical-align: text-top;
}
.change_1_position {
left: 0px;
top:0px;
z-index:2;
}
.change_2_position {
left: 0px;
top:0px;
z-index:3;
}
.change_3_position {
left: 0px;
top:0px;
z-index:4;
}
.change_4_position {
left: 0px;
top:0px;
z-index:5;
}
</style>

<body>
<div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$('.div1').hover(function() {
$('.div2').addClass("change_2_position");
$('.div3').addClass("change_3_position");
$('.div4').addClass("change_4_position");
}, function() {
$('.div2').removeClass("change_2_position");
$('.div3').removeClass("change_3_position");
$('.div4').removeClass("change_4_position");
}
);

$('.div2').hover(function() {
$('.div1').addClass("change_1_position");
$('.div3').addClass("change_3_position");
$('.div4').addClass("change_4_position");
}, function() {
$('.div1').removeClass("change_1_position");
$('.div3').removeClass("change_3_position");
$('.div4').removeClass("change_4_position");
}
);
</script>
</body>

# I copy/pasted a test of this and both div1 and div2 hovers (the ones I coded) worked. I just stacked the divs on the left during a hover via CSS class addition/deletion, but you could be much more creative and cool if you spent more than the 5 mins I did on coding ;)

itsmejainh

8:26 am on Jul 21, 2013 (gmt 0)

perfect! this works.. Many thanks.
You have opened a door for me to explore many things now :)