javascript 如何使用javascript在鼠标悬停时移动div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15679028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a div move on mouse over with javascript?
提问by AmazingRealist
The html:
html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Empty</title>
<script type="text/JavaScript">
<!--
-->
</script>
</head>
<body>
<div class="blackbox" id="specialbox"><p class="boxtext">Text</p></div>
<div class="blackbox"><p class="boxtext">Hem</p></div>
<div class="blackbox"><p class="boxtext">Stugan</p></div>
<div class="blackbox"><p class="boxtext">Info</p></div>
</body>
</html>
The CSS:
CSS：
body {
background-image:url('images/bkrnd.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.boxtext {
color: #ffffff;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 45px;
}
#specialbox {
margin-bottom: 10px;
}
.blackbox {
height: 75px;
width: 400px;
background-color: #000000;
opacity: 0.5;
filter:alpha(opacity=50);
margin-bottom: 3px;
line-height: 73px;
}
p {
margin: 0;
padding: 0;
}
When I hover the mouse over the divcalled "blackbox" I want it to move a little to the right. It has to be done with javascript. I've tried every bit of code and tutorials I've googled but they won't work. Thanks in advance!
当我将鼠标悬停在div所谓的“黑匣子”上时，我希望它向右移动一点。它必须用javascript来完成。我已经尝试了我在谷歌上搜索过的所有代码和教程，但它们不起作用。提前致谢！
回答by lordvlad
why use javascript? its simpler with css:
为什么要使用javascript？使用 css 更简单：
.blackbox:hover {
margin-left: 10px;
}
working fiddle: http://jsfiddle.net/gshNP/
工作小提琴：http: //jsfiddle.net/gshNP/
for animation use:
动画用途：
.blackbox:hover {
margin-left: 10px;
transition: margin-left .5s;
-moz-transition: margin-left .5s; /* Firefox 4 */
-webkit-transition: margin-left .5s; /* Safari and Chrome */
-o-transition: margin-left .5s; /* Opera */
}
回答by Aleks
You would need to surround your blackboxdivs with one div like:
您需要blackbox用一个 div包围您的div，例如：
EDIT:
编辑：
<div class="blackbox" onmouseover="moveDiv(this);" style="position:absolute; top:100px; left:108px;"id="specialbox"><p class="boxtext">Wedén</p></div>
<div class="blackbox" onmouseover="moveDiv(this);" style="position:absolute; top:150px; left:108px;"<p class="boxtext">Hem</p></div>
<div class="blackbox" onmouseover="moveDiv(this);" style="position:absolute; top:200px; left:108px;"<p class="boxtext">Stugan</p></div>
<div class="blackbox" onmouseover="moveDiv(this);" style="position:absolute; top:250px; left:108px;"<p class="boxtext">Info</p></div>
And then use javascript, something like this:
然后使用 javascript，如下所示：
function moveDiv(divRef)
{
var newTop = divRef.style.top;
newTop = parseInt(newTop);
newTop += 10;
divRef.style.top = newTop + 'px';
};
Take look at live example here: http://jsbin.com/agejud/2/
在这里查看现场示例：http: //jsbin.com/agejud/2/
This above is just as an example. If you want to apply to your example, you should add propery to your blackbox in your css. Something like this:
上面这只是一个例子。如果你想应用到你的例子中，你应该在你的 css 中为你的黑盒添加属性。像这样的东西：
.boxtext {
color: #ffffff;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 45px;
left: 0px;
}
Or you could use jQuery for more smooth transition. You can find an example here: moving elements with jquery
或者您可以使用 jQuery 来实现更平滑的过渡。您可以在此处找到示例：使用 jquery 移动元素
