在鼠标上方显示和隐藏元素 [英] 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.

<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>

推荐答案

只需先隐藏div

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

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

演示:小提琴

或使用CSS规则将其隐藏

Or use a css rule to hide it

.divbutton {
    display:none
}

演示:小提琴

这篇关于在鼠标上方显示和隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！