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 を 1 つの 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 に答える