javascript - Bootstrap hover tabs showing multiple tabs - Stack Overflow

I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'

The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.

Demo

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Home</a></li>
  <li><a href="#tab2">Profile</a></li>
  <li><a href="#tab3">Messages</a></li>
  <li><a href="#tab4">Account</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane fade active" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane fade active" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane fade active" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

JS

$('.nav-tabs > li').mouseover( function(){
    $(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:

TAB1 CONTENT

TAB2 OTHER CONTENT

In my actual version you don't have to move as fast for the problem to occur.

I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'

The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.

Demo

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Home</a></li>
  <li><a href="#tab2">Profile</a></li>
  <li><a href="#tab3">Messages</a></li>
  <li><a href="#tab4">Account</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane fade active" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane fade active" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane fade active" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

JS

$('.nav-tabs > li').mouseover( function(){
    $(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:

TAB1 CONTENT

TAB2 OTHER CONTENT

In my actual version you don't have to move as fast for the problem to occur.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Apr 4, 2014 at 0:59 user1425011user1425011 11922 silver badges1313 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the HTML:

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

Updated your fiddle: http://jsfiddle/VPn52/1/

maybe you can try my solution. i try this solution in my code and it works. for hover solution, i follow solution from here: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery(this).tab('show');
});

add this line (line 3 or after .. e.preventDefault(); .. )

jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');

and this line (after .. jQuery(this).tab('show') .. )

jQuery(tabContentSelector).addClass('active');

so the code bee like this:

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery('.tab-pane').removeClass('active');
    tabContentSelector = jQuery(this).attr('href');
    jQuery(this).tab('show');
    jQuery(tabContentSelector).addClass('active');
});

What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:

var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
  var $tab = $(this).find('a');
  if (!tabFadingIn) {
    tabFadingIn = true;
    $tab.one('shown.bs.tab', function() {
      tabFadingIn = false;
    });
    $tab.tab('show');
  }
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Found sollution for me. Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.