show and hide element on mouse over jquery

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>

javascript or jquery?if its jquery you must have your source and if it's js then you must put — Aljie, Jan 20 '14 at 02:17
the element should be hidden at first and be visible on hover — user3196424, Jan 20 '14 at 02:22
If you hide the buttons, how can you later mouse-over them to show them? — Birrel, Jan 20 '14 at 02:22
but what happens is it hust becomes invisivisible when hovered — user3196424, Jan 20 '14 at 02:22

score 1 · Answer 1 · answered Jan 20 '14 at 02:23

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

answered Jan 20 '14 at 02:23

Arun P Johny

384,651
66
527
531

This works nicely, but only if you have the text ".$Tri_IMAGE." ".$Tri_CAPTION.". If you delete the text and run it, nothing will happen, the div will have zero height. – Birrel Jan 20 '14 at 02:27
You have to assume that those two variables have a value – greg5green Jan 20 '14 at 02:30

Minh Nguyen · Answer 2 · 2014-01-20T02:28:42.137

0

You should put your javascript code in this function:

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

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

edited Jan 20 '14 at 02:28

answered Jan 20 '14 at 02:20

Minh Nguyen

490
1
3
8

You don't have to put jQuery in the document onload. That is only if the jQuery is being loaded before the DOM elements you want to act on. Here the element are on the page before the jQuery is called so this is unnecessary. – DutGRIFF Jan 20 '14 at 02:22
There's no guarantee the page is fully rendered and the DOM elements available to the script if you don't wait until the document is ready as Minh suggests. – RET Jan 20 '14 at 02:23
we're getting out of the topic, the concern is show and hide lement via jquery – user3196424 Jan 20 '14 at 02:23
Your question as written does not show you appreciate the point being made. – RET Jan 20 '14 at 02:24
@RET The javascript is executed as it is read. The HTML is read before the javascript. I am pretty sure this is the case but if I am wrong please point me to any documentation that would contradict my statement. I can't find the docs right this second but check this out: http://stackoverflow.com/questions/4643990/jquery-is-document-ready-necessary – DutGRIFF Jan 20 '14 at 02:31
@DutGRIFF - my comment was intended for the OP. Our posts were almost simultaneous. I don't disagree with you, but it's not clear whether the original question was (over) simplified, or whether document.ready could be a factor. – RET Jan 20 '14 at 03:54

score 0 · Answer 3 · answered Jan 20 '14 at 02:25

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

show and hide element on mouse over jquery

3 Answers3

Linked