如何使用javascript将div移到鼠标上？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用javascript将div移到鼠标上？相关的知识，希望对你有一定的参考价值。
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>
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;
[当我将鼠标悬停在名为“黑匣子”的div上时，我希望它向右移动一点。必须使用javascript完成。我已经尝试了谷歌搜索的所有代码和教程，但是它们无法正常工作。预先感谢！
答案
为什么使用JavaScript？它与CSS比较简单：
.blackbox:hover
margin-left: 10px;
工作提琴：http://jsfiddle.net/gshNP/
供动画使用：
.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 */
另一答案
您将需要用一个div包围blackbox div，例如：
编辑：
<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>
然后使用javascript，如下所示：
function moveDiv(divRef)
var newTop = divRef.style.top;
newTop = parseInt(newTop);
newTop += 10;
divRef.style.top = newTop + 'px';
;
在此处查看实时示例：http://jsbin.com/agejud/2/
以上仅作为示例。如果要应用于示例，则应在CSS的黑盒中添加属性。像这样的东西：
.boxtext
color: #ffffff;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 45px;
left: 0px;
或者您可以使用jQuery进行更平滑的过渡。您可以在此处找到示例：moving elements with jquery
以上是关于如何使用javascript将div移到鼠标上？的主要内容，如果未能解决你的问题，请参考以下文章