如何移動div1時懸停div2

我想做出「轉義」按鈕，讓我解釋一下，當您嘗試點擊按鈕時，它會移出。我想讓按鈕向下移動，當您將div1懸停時，動了起來，當你將鼠標懸停DIV2等等......這是香港專業教育學院提出：http://jsfiddle.net/6fsy8awj/如何移動div1時懸停div2

<!DOCTYPE html> 
<html lang="cs-CZ"> 
    <head> 
     <meta charset="UTF-8"/> 
     <meta name="generator" content="Prace"> 
     <link rel="stylesheet" href="Web8.css"> 
     <title>Rostik</title> 
    </head> 
    <body> 
     <div id="button"> 
      <button name="button1" value="link">Tlačítko</button> 
     </div> 
     <div id="div1"></div> 
     <div id="div2"></div> 
     <div id="div3"></div> 
     <div id="div4"></div> 
     <div id="div5"></div> 
     <div id="div6"></div> 
     <div id="div7"></div> 
     <div id="div8"></div> 
    </body> 
</html> 
#button { 
    transition: width 2s, height 2s, transform 2s; 
    position: relative; 
    top: 200px; 
    left: 500px; 
} 

#button:hover { 
} 
#div1 { 
    height: 20px; 
    width: 63px; 
    top: 188px; 
    left: 508px; 
    position: absolute; 
    background-color: #F00; 
} 
#div2 { 
    height: 20px; 
    width: 63px; 
    top: 229px; 
    left: 508px; 
    position: absolute; 
    background-color: #F00; 
} 
#div3 { 
    height: 20px; 
    width: 35px; 
    top: 209px; 
    left: 473px; 
    position: absolute; 
    background-color: #F00; 
} 
#div4 { 
    height: 20px; 
    width: 35px; 
    top: 209px; 
    left: 571px; 
    position: absolute; 
    background-color: #F00; 
} 
#div5 { 
    height: 21px; 
    width: 35px; 
    top: 188px; 
    left: 571px; 
    position: absolute; 
    background-color: #0F0; 
} 
#div6 { 
    height: 21px; 
    width: 35px; 
    top: 188px; 
    left: 473px; 
    position: absolute; 
    background-color: #0F0; 
} 
#div7 { 
    height: 21px; 
    width: 35px; 
    top: 228px; 
    left: 473px; 
    position: absolute; 
    background-color: #0F0; 
} 
#div8 { 
    height: 21px; 
    width: 35px; 
    top: 228px; 
    left: 571px; 
    position: absolute; 
    background-color: #0F0; 
} 
#div1:hover { 
    top: 300px; 
} 
#div2:hover { 

} 
#div3:hover { 

} 
#div4:hover { 

} 
#div5:hover { 

} 
#div6:hover { 

} 
#div7:hover { 

} 
#div8:hover { 

}

來源

2014-10-17 Rostislav Danko

已經在撥弄你已經把樣式懸停並通過改變頂部移動的股利，左等你究竟懷疑什麼，對不起，我想我din't了它。 – invinciblejai 2014-10-17 11:00:13

但我想要移動那個按鈕，當你懸停div1時，我不知道如何設置它，因爲我知道只有當我將光標移動到div1時如何懸停div1，我想在移動ur時將該按鈕向下移動光標在div1上 – 2014-10-17 11:01:39

這是一個純CSS的概念：http://jsfiddle.net/jme11/6fsy8awj/3/ – jme11 2014-10-17 13:56:35

工作液：jsFiddle

你將不得不使用jQuery做到這一點。在你的「轉型」中是一個錯誤，看看我的變化。

jQuery代碼

$("#div1").hover(
    function() { 
    $('#button').css('top','360px'); 
    }, 
//callback function being called after you leave the hover 
function() { 
    $('#button').css('top','200px'); 
    } 
);

來源

2014-10-17 11:30:14

，如果它給你一些想法。

代碼：

JS：

$("#div1").hover(
    function() { 
    $('#button').css('top','360px'); 

    }, 
     function() { 
      $('#button').css('top','200px'); 
     } 
);

搗鼓相同： http://jsfiddle.net/invincibleJai/6fsy8awj/1/

只需添加的jQuery。

來源

2014-10-17 11:13:14 invinciblejai

如何移動div1時懸停div2

回答

相關問題