title: show and hide element on mouse over jquery
body: <p>I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.</p>
  
  <pre><code>&lt;div class="mybooks"&gt;
      &lt;div class="divbutton"&gt;
           &lt;input  class="btnsubmit"  type="button" value="Edit" id="edit_trivia"&gt;
           &lt;input  class="btnsubmit"  type="button" value="Delete" id="delete_trivia"&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  ".$Tri_IMAGE."
  ".$Tri_CAPTION."
  &lt;/div&gt;";
  }
  ?&gt;
   &lt;/div&gt;
        &lt;!--close accordion--&gt;
     &lt;/div&gt;
     &lt;script&gt;
     $( ".mybooks" ).mouseenter(function() {
        $('.divbutton').show();
    });
  
    $( ".mybooks" ).mouseleave(function() {
    $('.divbutton').hide();
   });
  
   &lt;/script&gt;
  </code></pre>