Question

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">Wedén</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;
}

当我将鼠标悬停在名为“blackbox”的div上时，我希望它向右移动一点。必须使用javascript完成。我已经尝试了所有的代码和教程我用Google搜索，但它们无法正常工作。提前谢谢！

Answer 1

为什么要使用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 */
}

Answer 2

你需要用一个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

Answer 3

这是一个非常老的问题，但是我还是会抛出这个选项。本质上，这是一种使用translate3d css属性以“浮动”方式移动Div的javascript方法。

它是CSS和javascript的混合，以一种基本的方式将transform CSS属性添加到与鼠标交互的不同点的元素上。

这不是很好的编码，但是可以工作。一般来说，我对编码还很陌生，所以请耐心等待我的代码。我相信许多人可以通过更短，更好的方法来实现这一目标，希望这是一个好的开始。

const a = "transition: all 2s ease; transform: translate3d(-4.234px, 5px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;";
const b = "transition: all 2s ease; transform: translate3d(4.234px, -5px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;";
const c = "transition: all 2s ease; transform: translate3d(-4.234px, -5px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;";
const d = "transition: all 2s ease; transform: translate3d(4.234px, 5px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;";
const e = "transition: all 2s ease; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;";
const f = "transition: all 2s ease; transform: translate3d(14px, -0.03px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;";
const g = "transition: all 2s ease; transform: translate3d(-14px, -0.03px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;";
const h = "transition: all 2s ease; transform: translate3d(-14px, 0.03px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;";
const i = "transition: all 2s ease; transform: translate3d(14px, 0.03px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;";

const img = document.getElementById("img");
img.style.cssText = d;

const div = document.getElementById("targetbox");
div.style.cssText = f;

const anchor = document.getElementById("anchor");
anchor.style.cssText = e;

anchor.onmouseenter = function() {
  img.style.cssText = b;
  div.style.cssText = g;
}
anchor.onmouseover = function() {
  img.style.cssText = c;
  div.style.cssText = i;
}
anchor.onmousemove = function() {
  img.style.cssText = a;
  div.style.cssText = h;
}
anchor.onmouseout = function() {
  img.style.cssText = c;
  div.style.cssText = f;
}
anchor.onmouseleave = function() {
  img.style.cssText = b;
  div.style.cssText = i;
}

.boxtext {
  color: #ffffff;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  display: inline-block;
  position: relative;
}

#targetbox {
  margin: 0 0 10px 5px;
}

.blackbox {
  height: 75px;
  width: 150px;
  background-color: #000000;
  position: absolute;
  opacity: 0.8;
  filter: alpha(opacity=50);
  margin-bottom: 3px;
  line-height: 7px;
  left: -20px;
  display: inline-block;
  top: 20px;
  text-align: center;
}

p {
  margin: 0;
  padding: 0;
  color: #ffffff;
}

img {
  width: 200px;
  height: 200px;
}

a {
  position: absolute;
  margin-left: 50px;
}

<a id="anchor">
  <img id="img" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/05/event-handlers.png?fit=1200%2C600&ssl=1" 30vw>
  <div id="targetbox" class="blackbox">
    <h3 class="boxtext"> Hello World </h3>
    <p> Floating div</p>
  </div>
</a>

如何使用javascript将鼠标移动到div？

3 个答案: