homepage Welcome to WebmasterWorld Guest from 54.198.33.96
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Target multiple elements on Hover
itsmejainh




msg:4594905
 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




msg:4594940
 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




msg:4594991
 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




msg:4594992
 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




msg:4595002
 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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved