Twitter Bootstrap选项卡:在悬停时显示,隐藏在onmouseout上

时间:2012-05-10 16:59:56

标签: javascript jquery css hover twitter-bootstrap

我更改了bootstrap.js(只需用悬停替换点击):

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

现在,当您不将鼠标悬停在标签页或内容上时,我希望关闭内容标签。

我该怎么做?

1 个答案:

答案 0 :(得分:2)

更新:类似下面的内容

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