Question

我想在鼠标悬停时显示按钮并隐藏它们，我尝试使用以下代码但不起作用。

<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

首先隐藏div

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

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

演示：Fiddle

或使用css规则隐藏它

.divbutton {
    display:none
}

演示：Fiddle

Answer 2

你应该把你的javascript代码放在这个函数中：

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

您的代码：http://jsfiddle.net/VGJ5u/

Answer 3

This小提示显示当您将鼠标悬停在按钮上时隐藏按钮（display: none;）。问题是，一旦它们消失，你就不能重新出现它们。什么都没有悬停在... ...

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

在jquery上显示和隐藏鼠标上的元素

3 个答案: