javascript - DIV Hover makes the other DIV Move -

i ask help.

http://jsfiddle.net/perrl/9/

<div class="header-logo"> <a href="#"><img src="http://www.bendaggers.com/wp-content/themes/anakin%20skywalker/images/bendaggers%20logo.png" /></a> </div>  <div class="xbdlogo"> <img src="http://www.bendaggers.com/wp-content/themes/anakin%20skywalker/images/bendaggers%20logo%20two.png" /> </div> 

what i'm trying when hover logo "bendaggers", little logo beside change css style (from) top:-50px; top:30px;

if me on javascript? thank you!

if not wrong, achieving this?

demo

than css enough job done

css

.header-logo:hover + .xbdlogo {     top:40px;     -webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out; }