Twitter Bootstrap 选项卡：在悬停时显示，在鼠标输出时隐藏

Posted 2023-05-08

【中文标题】Twitter Bootstrap 选项卡：在悬停时显示，在鼠标输出时隐藏

【英文标题】：Twitter Bootstrap Tabs: Show on Hover, hide on onmouseout

【发布时间】：2012-05-19 07:31:05

【问题描述】：

我更改了 bootstrab.js（只是将点击替换为悬停）：

  $(function () 
    $('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) 
      e.preventDefault()
      $(this).tab('show')
    )
  )

现在我希望在您没有将鼠标悬停在选项卡或内容上时关闭内容选项卡。

我该怎么做？

【问题讨论】：

fyi，由于没有悬停，这在移动触摸设备上效果不佳：o

在移动浏览器上，鼠标悬停会自动替换为点击。再加上手动关闭按钮，它非常流畅。刚刚测试过...

【参考方案1】：

更新：类似于下面的内容

var timer;

$('tab_element').hover(
    function() //hover
        // clear timer first
        clearTimeout(timer);
        // then show the content
    ,
    function() //unhovered, 1000 milliseconds
        // set a timer to call the hide function
        timer = setTimeout("hide_function", 1000);
    
);

$('content_tab_here').bind('mouseleave', function()
    // hide it, you can set a timer here too if you want
);

这是关于计时器 http://www.w3schools.com/js/js_timing.asp 的文档 这里有很多选项，但这会让你开始，我使用的 jquery 是老派的，所以如果你使用的是最新版本的 jquery，你可以相应地更改代码。我不想为你写出所有的东西，因为那样你就不会学习，而且我没有那么多时间，因为我在工作。祝你好运。

【讨论】：

还有一个小问题：当鼠标悬停在所需的 nav-tab 上后，没有悬停在 content-div 或另一个 nav-tab 上时，它保持打开/活动状态。就像在水平菜单中一样，您将鼠标悬停在第一个（最左侧）选项卡上，然后向左移动。您的解决方案不会影响它...您需要一个 jfiddle 来理解我的意思吗？

小提琴或图片都有帮助，或者这个东西如何嵌套的 html 代码。

它不能完美地反映我的布局，但我希望你能明白问题所在。 jsfiddle.net/WnQvF/27

对，我明白你在说什么。我的解决方案不影响这一点，您必须为您的标签捕获相同的事件（mouseleave），但如果您在标签和内容之间有空间，那么当您将鼠标悬停在标签上时内容将消失，因此取决于您想要如何显示这个，你可能需要一个计时器让内容消失

你或其他人能给我举个例子吗？