Moving divs that aren't nested

[bradleybebad]

Hello, I am wondering about a simple div mover activated upon hover.

 

Html will look like this in a nutshell:

<div class="moveMe">car</div>

<div class="hoverMe">Hover Me</div>

 

When these are nested, I know you can do something like:

.hoverMe:hover .moveMe {

       position:absolute; left:-40px; /* Moves .moveMe div 40px */

}

 

This is great and all, but I cannot have nested divs for my instance. Is there a way to do this with css3/html5 or is script the solution?

[george]

Use the so called adjacent sibling selectors from css 2. You have to change the order of your elements in the dom.

<div class="hoverMe">Hover Me</div><div class="moveMe">car</div>.hoverMe:hover + .moveMe{  background-color:red;}

See

http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

[bradleybebad]

Hah! Simple as that! Thanks George, I thought there might be a good css solution.