Twitter bootstrap 如何使下面的代码在鼠标悬停而不是单击的情况下工作？_Twitter Bootstrap

Twitter bootstrap 如何使下面的代码在鼠标悬停而不是单击的情况下工作？

twitter-bootstrap

Twitter bootstrap 如何使下面的代码在鼠标悬停而不是单击的情况下工作？,twitter-bootstrap,Twitter Bootstrap,我对Bootstrap很陌生。我已经编写了下面的代码，可以很好地使用鼠标点击。我希望相同的事件与鼠标悬停一起工作，但由于某些原因，鼠标悬停不起作用。任何帮助都将不胜感激。下面是我的代码 <html> <head> <title></title> <style type="text/css"> </style> <link rel="stylesheet" href="h

我对Bootstrap很陌生。我已经编写了下面的代码，可以很好地使用鼠标点击。我希望相同的事件与鼠标悬停一起工作，但由于某些原因，鼠标悬停不起作用。任何帮助都将不胜感激。下面是我的代码

<html>
   <head>
    <title></title>
    <style type="text/css">
    </style>
    <link rel="stylesheet"       href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

    </head>


    <body>
    <ul class="nav nav-pills nav-stacked col-md-2" id="pills-first">
        <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
        <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
        <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
        <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
    </ul>
    <div class="tab-content col-md-10">
        <div class="tab-pane active" id="tab_a">
            <h4>Pane A</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et     malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_b">
            <h4>Pane B</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_c">
            <h4>Pane C</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_d">
            <h4>Pane D</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
    </div><!-- tab content -->




    </body>
    </html>








窗格A

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格B

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格C

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格D

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

您可以在包含引导javascript后添加此脚本：

$（文档）.ready（函数（）{
$（'.nav'）.hover（函数（）{
$（'.tab content'）.find（'.active'）.removeClass（'active'）；
$（'.nav'）.find（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（$（this.find（'a'）.attr（'href'））.addClass（'active'）；
});
});







窗格A

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格B

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格C

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

窗格D

佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames
ac turpis egestas。

如果包含引导和jquery两次，应该删除重复项。