Html 如何在悬停div2时移动div1
我想做一个转义按钮，让我解释一下，当你们试着点击这个按钮时，它会移出。。 我想让按钮向下移动，当你们悬停在div1上，向上移动，当你们悬停在div2上等等。。。这就是我所做的：Html 如何在悬停div2时移动div1,html,css,button,hover,Html,Css,Button,Hover,我想做一个转义按钮，让我解释一下，当你们试着点击这个按钮时，它会移出。。 我想让按钮向下移动，当你们悬停在div1上，向上移动，当你们悬停在div2上等等。。。这就是我所做的： 如果它能给你一些想法 代码： js: 为同样的目的而提琴： 只需添加jquery。工作解决方案： 您必须使用jQuery来实现这一点。在你的“过渡”是一个错误，看看我的变化 jQuery代码 你已经在fiddle中设置了悬停的样式，并通过更改顶部、左侧等来移动div。你的疑问是什么，对不起，我想我不知道。但是当你悬停d
如果它能给你一些想法 代码： js: 为同样的目的而提琴： 只需添加jquery。工作解决方案： 您必须使用jQuery来实现这一点。在你的“过渡”是一个错误，看看我的变化 jQuery代码
你已经在fiddle中设置了悬停的样式，并通过更改顶部、左侧等来移动div。你的疑问是什么，对不起，我想我不知道。但是当你悬停div1时，我想移动那个按钮，我不知道如何设置它，因为当我在div1上移动光标时，我只知道如何悬停div1，当您将光标移动到div1上时，我想向下移动该按钮这里有一个仅限于css的概念：
<!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 {
}
$( "#div1" ).hover(
function() {
$('#button').css('top','360px');
},
function () {
$('#button').css('top','200px');
}
);
$( "#div1" ).hover(
function() {
$('#button').css('top','360px');
},
//callback function being called after you leave the hover
function () {
$('#button').css('top','200px');
}
);