Question

我想＆＃34;逃避＆＃34;按钮，让我解释一下，当你试图点击按钮时，它会移出.. 我想让按钮向下移动，当你悬停div1，向上移动，当你悬停div2等等......这就是我做的：http://jsfiddle.net/6fsy8awj/

<!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 {

}

Answer 1

如果它能给你一些想法。

代码：

JS：

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

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

小提琴： http://jsfiddle.net/invincibleJai/6fsy8awj/1/

只需添加jquery。

Answer 2

工作解决方案：jsFiddle

您必须使用jQuery执行此操作。在你的“过渡”中是一个错误，看看我的变化。

jQuery代码

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

如何在悬停div2时移动div1

2 个答案: