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

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

oops forgot to mention; writing multiple selectors in jquery is like

('selector1, selector2, ...')

which you have mistakenly have written like:

$('div', '#nav_container').hover(function() {....

hope this helps

Answer 3

它很容易修复伴侣。

在脚本标签中写入以下内容：

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

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

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