Question

我是jQuery的新手，我有一个带有图像和文本的div：在鼠标上整个div应该向下移动，在鼠标离开时它应该返回到原来的位置。如果我在文本上触发鼠标悬停它可以正常工作，但如果我在父div或图像上执行相同操作，则div继续上下移动。

这是我的HTML：

<div id="sidebar">
   <a href="/">
      <img src="//path" width="150" style="margin-bottom:5px;" />
   </a>
   <div id="mydesc"></div> 
</div>

我的Javascript：

  $('#sidebar').mouseover(function(){
      $('#mydesc').animate({
        'marginTop':"30"
      });
   });
   $('#sidebar').mouseout(function(){
      $('#mydesc').animate({
        'marginTop':"0"
      });
   });

Answer 1

这应该解决问题。我以前遇到过这个问题。只需使用带有2个函数http://api.jquery.com/hover/的.hover（）。第一个功能是mouseenter，其他功能是mouseleave。通过这种方式，您可以减少代码并更容易跟上。 http://jsfiddle.net/9urkfub2/

$(document).ready(function(){


    $("#sidebar").hover(
        function(){
             $('#mydesc').animate({
                'marginTop':"30"
            });
        }, function(){
            $('#mydesc').animate({
                'marginTop':"0"
            });
        });
    });

Answer 2

使用此CSS。

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

应用hover.css效果后的示例元素：

 <a class="button grow">Add to Basket</a>

jQuery：div移动，因为它不应该是.mouseover（）。mouseout（）

2 个答案: