如何移动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

回答

相关问题