0

私は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>
4

3 に答える 3

1

.hover()代わりに使用

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

デモ

于 2013-04-11T23:03:39.020 に答える
1

これがうまくいくかどうか教えてください...

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/

于 2013-04-11T23:04:06.897 に答える