Question

我有4个垂直药片，当我将鼠标悬停在它们上面时它们会显示内容，但是当我将它们悬停在它们上面一段时间后它们就不再工作了。我在Codepen here上做了一个演示。

我的目标是默认显示有效测试1标签，当我们点击或悬停在其上时，显示另一个标签（测试2 3和4）。

   <div class="container">
  <h3>Vertical Pills</h3>
  <div class="row">
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="col-md-3"> 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col-md-3"> 
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </div>
    <div class="clearfix visible-lg"></div>
  </div>
</div>

和js文件

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

Answer 1

您的垂直药丸il元素未放置在ul元素中，而是放置在div元素中。将div元素更改为ul元素可修复您的错误。

您可以在此处查看一个有效的示例：https://codepen.io/anon/pen/pEZXom。

悬停在主题上后，引导选项卡会阻塞

1 个答案: