1

的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来完成。我已经尝试了我在谷歌上搜索过的所有代码和教程，但它们不起作用。提前致谢！

4

3 回答 3

4

为什么使用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 */
}
于 2013-03-28T10:18:47.600 回答
1

您需要blackbox用一个 div 包围您的 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 进行更平滑的过渡。你可以在这里找到一个例子：使用 jquery 移动元素

于 2013-03-28T10:15:17.850 回答
0

好吧，这是一个非常古老的问题，但无论如何我都会提出这个选项。这基本上是一种使用 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>

于 2020-09-24T00:01:34.157 回答