悬停div2时如何移动div1答案

【问题标题】：how to move div1 when hovering div2悬停div2时如何移动div1
【发布时间】：2014-10-17 10:54:08
【问题描述】：

我想制作“转义”按钮，让我解释一下，当您尝试单击按钮时，它会移出.. 我想让按钮向下移动，当你悬停 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 {

}

【问题讨论】：

你已经在小提琴中放置了悬停样式，并通过更改顶部、左侧等来移动 div。你的疑问到底是什么，对不起，我想我不明白。
但是当你悬停 div1 时我想移动那个 BUTTON，我不知道如何设置它，因为我只知道当我在 div1 上移动光标时如何悬停 div1，我想移动当您将光标移到 div1 上时，该按钮向下
这是一个纯 CSS 的概念：jsfiddle.net/jme11/6fsy8awj/3

标签： html css button hover

【解决方案1】：

工作解决方案：jsFiddle

您将不得不使用 jQuery 来执行此操作。在你的“过渡”是一个错误，看看我的变化。

jQuery 代码

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

【讨论】：

【解决方案2】：

如果它给你一些想法。

代码：

js:

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

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

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

只需添加 jquery。

【讨论】：