Show And Hide Element On Mouse Over Jquery

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

Solution 1:

Just hide the div first

//hide the div herevar $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

Solution 2:

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

Solution 3:

You should put your javascript code in this function:

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

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

Share