在鼠标上方显示和隐藏元素

Question

I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.

<div class="mybooks">
    <div class="divbutton">
         <input  class="btnsubmit"  type="button" value="Edit" id="edit_trivia">
         <input  class="btnsubmit"  type="button" value="Delete" id="delete_trivia">
    </div>
</div> 
".$Tri_IMAGE."
".$Tri_CAPTION."
</div>";
}
?>
 </div>
      <!--close accordion-->
   </div>
   <script>
   $( ".mybooks" ).mouseenter(function() {
      $('.divbutton').show();
  });

  $( ".mybooks" ).mouseleave(function() {
  $('.divbutton').hide();
 });

 </script>

Answer 1

Just hide the div first

//hide the div here
var $btn = $('.divbutton').hide()
$(".mybooks").mouseenter(function () {
    $btn.show();
});

$(".mybooks").mouseleave(function () {
    $btn.hide();
});

Demo: Fiddle

---

Or use a css rule to hide it

.divbutton {
    display:none
}

Demo: Fiddle

Answer 2

You should put your javascript code in this function:

$( document ).ready(function() {
    //your code
});

Your code: http://jsfiddle.net/VGJ5u/

Answer 3

This fiddle shows the buttons hiding ( display: none; ) when you hover over them. The thing is, you can't have them reappear once they're gone. There is nothing to hover over...

<div class="divButtons">
    <input  class="btnsubmit"  type="button" value="Edit" id="edit_trivia" />
    <input  class="btnsubmit"  type="button" value="Delete" id="delete_trivia" />
</div>

JavaScript:

$('#edit_trivia').hover(function(){
    $(this).css('display', 'none');
});

$('#delete_trivia').hover(function(){
    $(this).css('display', 'none');
});