jquery - jQuery 显示/隐藏渲染重复内容

Question

我对 jquery 很陌生，所以请耐心等待。我正在对多个 div 进行简单的显示/隐藏。基本上，您将鼠标悬停在具有类的图像上，并显示来自具有相应类的 div 的内容。我遇到的事情是，如果您将鼠标悬停在一个图像上，然后将鼠标悬停在另一个图像上，那么在某些情况下，我会看到上一个悬停的内容，而当前悬停的内容基本上是重复的内容。这实际上只有当您快速悬停在图像上但仍然很烦人时。任何想法为什么会发生这种情况？

jQuery('document').ready(function(){

  jQuery('.company').not(':first').hide();

  jQuery('#company_container img').on('hover', function(){

var contenttoShow = jQuery(this).attr('data-title');

    contenttoShow2 = jQuery(contenttoShow);
    jQuery('.company').hide();
    contenttoShow2.fadeIn(500);
  });

});

<div class="company" id="company_1">
<p>some content goes here</p>
</div>

<div class="company" id="company_2">
<p>some content goes here</p>
</div>

<div class="company" id="company_3">
<p>some content goes here</p>
</div>

<div id="company_container">
 <a title="" href="#"><img data-title="#company_1" src="test.jpg" /></a>
 <a title="" href="#"><img data-title="#company_2" src="test2.jpg" /></a>
 <a title="" href="#"><img data-title="#company_3" src="test3.jpg" /></a>
</div>

score 1 · Accepted Answer

1

.hover()改为使用

jQuery('#company_container img').hover(function () {

演示

于 2013-04-11T23:03:39.020 回答

score 1 · Accepted Answer

让我知道这是否适合您...

jQuery('.company').not(':first').hide();

jQuery('#company_container img').mouseover(function() {
   jQuery('.company').hide();
   var contenttoShow = jQuery(this).attr('data-title');
   jQuery(contenttoShow).fadeIn(500);      

});

http://jsfiddle.net/ba6SZ/