CSS3 – Target multiple div elements on Hover

[itsmejainh]

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: **http://jsfiddle.net/srjzA/4/**

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.

[Chester]

They say you can’t with just CSS alone unless the div’s are siblings of the hovered element.

http://stackoverflow.com/questions/4605806/target-multiple-html-properties-with-csshover

[Paulie_D]

It can be done but it will require multiple animations and using the sibling connector (~)

[PicnicTutorials]

Just nest all the divs in a parent div. target them by… div + div. and css3/jquery the animation. Should be pretty easy.

[Author]

Posts