The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › CSS3 – Target multiple div elements on Hover
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.
They say you can’t with just CSS alone unless the div’s are siblings of the hovered element.
It can be done but it will require multiple animations and using the sibling connector (~)
Just nest all the divs in a parent div. target them by… div + div. and css3/jquery the animation. Should be pretty easy.