Wie mache ich ein div bewegen der Maus über ein mit javascript?

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;
}

Wenn ich mit der Maus über die div als "blackbox" ich will es, sich zu bewegen ein wenig nach rechts. Es hat zu tun mit javascript. Ich habe versucht, jedes bisschen code und tutorials habe ich gegoogelt, aber Sie wird nicht funktionieren. Vielen Dank im Voraus!

Sie können versuchen, jQuery-und .css('margin', '150px');
Wo ist dein JavaScript? "Ich habe versucht, jedes bisschen code und tutorials habe ich gegoogelt, aber Sie nicht funktionieren" --> Geben Sie uns ein Beispiel, in dem es nicht funktioniert.

InformationsquelleAutor AmazingRealist | 2013-03-28

  1. 4

    warum mit javascript? einfacher mit css:

    .blackbox:hover {
   margin-left: 10px;
}

    arbeiten fiddle: http://jsfiddle.net/gshNP/

    für die animation zu verwenden:

    .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 */
}
    i want it to move a little to the right . Wie wollen Sie wissen, wie viel ist, dass little ist, wenn Sie es auf der rechten Seite des Bildschirms 🙂
    danke @Aleks, aktualisiert die Antwort
    Toll. user2..ich habe jetzt verstanden, dass Sie wollte, einfach zu bewegen, und nicht wie eine animation. Mein Beispiel war wie eine animation bewegen, mit jedem hover 🙂 ok, Super, dass Sie gefunden haben, Sie zu beantworten 😉

    InformationsquelleAutor lordvlad

  2. 1

    Würden Sie brauchen, um Ihre surround - blackbox divs mit einem div wie:

    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>

    Und verwenden Sie dann javascript, so etwas wie dieses:

    function moveDiv(divRef)
{
 var newTop = divRef.style.top;
 newTop = parseInt(newTop);
 newTop += 10;
 divRef.style.top = newTop + 'px';
};

    Schauen bei live-Beispiel hier: http://jsbin.com/agejud/2/

    Das oben ist nur ein Beispiel. Wenn Sie sich bewerben möchten zu Ihrem Beispiel, Sie sollten hinzufügen Anwesen zu Ihrer blackbox in Ihrem css. So etwas wie dieses:

    .boxtext {
    color: #ffffff;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 45px;

    left: 0px;
}

    Oder verwenden Sie jQuery für mehr reibungslosen übergang. Ein Beispiel finden Sie hier: die beweglichen Elemente mit jquery

    Okay, dies bedeutet mehr als alles, was ich bisher ausprobiert habe. Ich vergaß zu erwähnen, dass ich will, dass die blackbox divs verschieben individuell auf die Maus über. Ich versuchte die Umgebung nur eines der divs mit <div id="helper" onmouseover="moveDiv(this);" style="position:absolute; top:100px; left:108px;"> <div class="blackbox"><p class="boxtext">Hem</p></div> </div> Aber das vermasselt die Positionierung der divs. Ich habe keine Ahnung, wie format mein Kommentar, tut mir Leid.
    Ich habe aktualisiert die Antwort. Bitte schauen Sie nicht. Und es ist ok für nicht-Formatierung der Kommentare 🙂

    InformationsquelleAutor Aleks

Schreibe einen Kommentar