title: How do I make a div move on mouse over with javascript?
body: <p>The html:
      </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
  &lt;title&gt;Empty&lt;/title&gt;
  
  &lt;script type="text/JavaScript"&gt;
  
  &lt;!--
  
  --&gt;
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="blackbox" id="specialbox"&gt;&lt;p class="boxtext"&gt;Text&lt;/p&gt;&lt;/div&gt;
  &lt;div class="blackbox"&gt;&lt;p class="boxtext"&gt;Hem&lt;/p&gt;&lt;/div&gt;
  &lt;div class="blackbox"&gt;&lt;p class="boxtext"&gt;Stugan&lt;/p&gt;&lt;/div&gt;
  &lt;div class="blackbox"&gt;&lt;p class="boxtext"&gt;Info&lt;/p&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>When I hover the mouse over the <code>div</code> called "blackbox" I want it to move a little to the right. It has to be done with javascript. I've tried every bit of code and tutorials I've googled but they won't work. Thanks in advance!</p>