Question

我遇到了问题。这是我的网站http://keironlowe.x10hosting.com/ 导航栏中移动的红线是由以下代码引起的。但它没有按预期工作。我想要的是红线在悬停时变长。但是当你移开光标时，请恢复正常尺寸，但那不能正常工作，它只能工作一次，然后你必须刷新，它不能在主链接上工作，它会变小而不是更长。帮助

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('div', '#nav_container').hover(function() {
    $(this).animate({width: '220px'}, 1000);      
}, function() {
    $(this).animate({width: '300px'}, 1000); 
});
});
</script>

Answer 1

尝试在动画之前调用.stop()：

$(document).ready(function() {
  $('div', '#nav_container').hover(function() {
    $(this).stop();
    $(this).animate({width: '220px'}, 1000);      
  }, function() {
    $(this).stop();
    $(this).animate({width: '300px'}, 1000); 
  });
});

编辑：如果要调整图像大小而不是包含它的DIV。试试这个：

$(document).ready(function() {
     $('#nav_container div').hover(function() {
        $(this).children('img').stop().animate({width: '220px'}, 1000);      
     }, function() {
        $(this).children('img').stop().animate({width: '300px'}, 1000); 
     });
});

您可能需要调整宽度和持续时间以获得所需的效果。

Answer 2

很容易修复配偶。

在脚本标记中写下以下内容：

$(document).ready(function() {
        $('.box').hover(
          function() {
              $(this).css({ background: 'blue' });
          },
          function() {
              $(this).css({ background: 'black' });
          }
        );
    });

并写下以下标记，你应该让你的悬停向你微笑

<div class="box"></div>

Answer 3

哎哟忘了提;在jquery中编写多个选择器就像

（'selector1，selector2，...'）

你错误地写了：

$（'div'，'＃nav_container'）。hover（function（）{....

希望这会有所帮助

jQuery问题：悬停，取消悬停不起作用

3 个答案: