javascript - 如何在 Bootstrap 3 选项卡上应用悬停？

Question

当鼠标从 .tab 移到 时，如何向此代码添加功能以将 .tab-pane 保留在页面上。选项卡 Pane ？并且只有当鼠标从 .tab-pane 悬停时才关闭它？

$(".presentation").hover(function(){
  var target = $(this).data("target");
     $(target).addClass('in active');
    }, function(){
		 var target = $(this).data("target");
    $(target).removeClass('in active');
});

.tab-pane{
 background:#eee;
  height:120px;
  Padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div>

  <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a class="presentation" data-target="#home">Home</a></li>
    <li role="presentation"><a class="presentation" data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a class="presentation" data-target="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a class="presentation" data-target="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="home">Home</div>
    <div role="tabpanel" class="tab-pane fade" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane fade" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane fade" id="settings">settings</div>
  </div>

</div>
  </div>

Answer 1

您可以使用 relatedTarget传递给 hover 事件的第二个处理程序的 jQuery eventObject 属性:

$(".presentation").hover(
  function() {
    var target = $(this).data("target");
    $(target).addClass('in active');
  },
  function(event) {
    var target = $(this).data("target");
    var targetId = target.replace('#', '');       
    var relatedTarget = $(event.relatedTarget);

    if (relatedTarget.attr('id') === targetId) {
      return;
    }

    $(target).removeClass('in active');
  }
);

但您还需要在 .tab-pane 元素上绑定(bind) mouseleave 事件处理程序，以便正确隐藏它们。

$('.tab-pane').on('mouseleave', function() {
  $(this).removeClass('in active');
})