html - how to move div1 when hovering div2 -

I want to create a "escape" button, let me know, when you try to click on the button, Get out .. I want to hang the button down, when you hover the div1, move on, when you hover the div2 etc. ... this is what is made:

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "cs-cz" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" /> & Lt; Meta name = "generator" content = "pace" & gt; & Lt; Link rel = "stylesheet" href = "Web8.css" & gt; & Lt; Title & gt; Rostik & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "button" & gt; & Lt; Button name = "button1" value = "link" & gt; Tlačítko & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div id = "div1" & gt; & Lt; / Div & gt; & Lt; Div id = "div2" & gt; & Lt; / Div & gt; & Lt; Div id = "div3" & gt; & Lt; / Div & gt; & Lt; Div id = "div4" & gt; & Lt; / Div & gt; & Lt; Div id = "div5" & gt; & Lt; / Div & gt; & Lt; Div id = "div6" & gt; & Lt; / Div & gt; & Lt; Div id = "div7" & gt; & Lt; / Div & gt; & Lt; Div id = "div8" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; # Button {transition: width 2s, height 2s, 2s; Status: Relative; Top: 200px; Left: 500 pounds; } #button: hover {} # div1 {height: 20px; Width: 63px; Top: 188 pixels; Left: 508 pixels; Status: Completed; Background color: # F00; } # Div2 {height: 20px; Width: 63px; Top: 22 9px; Left: 508 pixels; Status: Completed; Background color: # F00; } # Div3 {Height: 20px; Width: 35px; Top: 20 9px; Left: 473px; Status: Completed; Background color: # F00; } # Div4 {Height: 20px; Width: 35px; Top: 20 9px; Left: 571px; Status: Completed; Background color: # F00; } # Div5 {Height: 21px; Width: 35px; Top: 188 pixels; Left: 571px; Status: Completed; Background-color: # 0F0; } # Div6 {height: 21px; Width: 35px; Top: 188 pixels; Left: 473px; Status: Completed; Background-color: # 0F0; } # Div7 {Altitude: 21px; Width: 35px; Top: 228 pixels; Left: 473px; Status: Completed; Background-color: # 0F0; } # Div8 {height: 21px; Width: 35px; Top: 228 pixels; Left: 571px; Status: Completed; Background-color: # 0F0; } # Div1: hover {above: 300px; } # Div2: hover {div4: hover {} # div5: hover {} # div6: hover {} # div7: hover {} # div8: hover {}  

< P>

Work solution:

You have to do it with jQuery. There was a mistake in your 'transition', take a look at my changes.

jQuery code

  $ ("# div1"). Hover (function () ($ ('# button'). CSS ('top', '360px');}, // callback function being said after leaving the hover function () {$ ('# button' ). CSS ('top', '200px');});