title: How to slide a div by hovering over another div with jquery?
body: <p>I have some code here and cannot find out how to make this work because I am still really new to javascript and jquery. I will have a demo below so you can see what I have going on. In the demo there is div positioned <code>left:-60px</code> so it is hidden, this div also has class of 'show' which positions the div to <code>left:0</code> There is also the long black box which is another div. I want to make it so when you hover over the long black box, it will activate the 'show' property of the other div. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $showSidemenu = $('#sidemenu');
  var $sidemenuShowButton = $('#sidemenuShowButton');
  
  function(showSidemenu){
    $showSidemenu.onmouseover($sidemenuShowButton).addclass('show');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#sidemenuShowButton {
    width:60px;
    height:100%;
    background:#000000;
    top:0;
    left:0;
    position:fixed;
  }
  #sidemenu {
    width: 60px;
    height:100%;
    background-color: #383D3F;
    position: fixed;
    top: 0;
    left:-60px;
    float: left;
    z-index:0;
  }
  #sidemenu.show {
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="sidemenuShowButton"&gt;&lt;/div&gt;
  &lt;div id="sidemenu"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>