时间戳

首页 > 解决方案 > 如何在 Bootstrap 3 选项卡上应用悬停？

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

问题描述

.tab-pane当鼠标从 移出到 时，.tab如何向此代码添加功能以使 保持在页面上.tab-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>

标签： javascriptjquerytwitter-bootstrap-3

解决方案

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

$(".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');
  }
);

但是您还需要mouseleave在元素上绑定事件处理程序.tab-pane才能正确隐藏它们。

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

推荐阅读