Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>    
$(document).ready(function(){
     $(this).find(".itemname").hide();
      $(".productborder").mouseover(function(){
    $(this).find(".itemname").animate({right:'160px'},"fast");
    $(this).find(".itemname").show();

 $(".productborder").mouseleave(function(){
 $(this).find(".itemname").animate({right:'0px'},"fast");
 $(".itemname").fadeOut(300);
    });

  });

});
</script> 
<html> 
 <div class="productborder">
  <p class="itemname"> Hello World </p>
  <img src="images/1.jpg" class="img-responsive center-block" alt="wallet" />
 </div> <!-- end of productborder -->
</html>

这是我的Jquery和HTML，Jquery悬停效果在前几次完美运行，比如说4/5次。然后，Itemname卡在右侧，只是出现并消失。我是Jquery的新手，任何解决这个问题的解决方案都将受到高度赞赏。

Answer 1

您的第二个事件附件位于第一个附件中，您的括号在错误的行上关闭。重新组织它们，使每个事件附件都是独立的：

$(document).ready(function(){
     $(this).find(".itemname").hide();
     $(".productborder").mouseover(function(){
      $(this).find(".itemname").animate({right:'160px'},"fast");
      $(this).find(".itemname").show();
     });
     $(".productborder").mouseleave(function(){
       $(this).find(".itemname").animate({right:'0px'},"fast");
       $(".itemname").fadeOut(300);
    });
});

Answer 2

您需要在mouseover

中绑定mouseleave事件处理程序处理程序

使用

$(document).ready(function() {
    // You need to use .productborder selector instead of this
    $(".productborder").find(".itemname").hide();
    $(".productborder").mouseover(function() {
    });
    $(".productborder").mouseleave(function() {

    });
});

几次后Jquery效果不起作用

2 个答案: