Twitter 引导选项卡:悬停时显示，鼠标输出时隐藏

Twitter Bootstrap Tabs: Show on Hover, hide on onmouseout

本文关键字：显示 输出 隐藏 鼠标 悬停 选项 Twitter      更新时间：2023-09-26

我更改了引导.js（只是将单击替换为悬停）：

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

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

我该怎么做？

更新：如下所示

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，你可以相应地更改代码。我不想为你写出所有的东西，因为那样你就不会学习，我没有那么多时间，因为我在工作。祝你好运。

相关文章：