Bootstrap 3 选项卡 - 悬停时显示？

Question

我想让我的标签在悬停时激活。实现这一目标的最佳方法是什么？理想情况下不更改 tabs.js 文件。

这是我的网址http://opennetsummit.wpengine.com/

标签是页面中间的三个图像选项。

<div class="panel">
    <div class="panel-heading">
        <!-- Tabs -->
        <div class="container">
            <ul class="nav panel-tabs">
                <li class="active col-sm-3">
                    <a href="#tab1" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
                            <h3>Workshops</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a href="#tab2" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
                            <h3>Open Networking Summit</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a href="#tab3" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
                            <h3>Webinars</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <div class="mid-form">
                        <h3>Get Updates</h3>
                        <form method="post" action="http://opennetsummit.wpengine.com/" id="mc4wp-form-1" class="form mc4wp-form form-inline" _lpchecked="1">
                            <div class="row mid-form">

                                <div class="col-sm-12">
                                    <input type="text" name="FNAME" placeholder="First Name" required="required" class="form-control" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                                </div>

                                <div class="col-sm-12">
                                    <input type="text" name="LNAME" placeholder="Last Name" required="required" class="form-control">
                                </div>

                                <div class="col-sm-12">
                                    <input type="email" name="EMAIL" placeholder="Email Address" required="required" class="form-control">
                                </div>

                                <div class="col-sm-6 col-sm-offset-6">
                                    <input type="submit" value="Sign Up" class="form-control">
                                </div>

                            </div>

                            <textarea name="_mc4wp_required_but_not_really" style="display: none !important;" class="form-control"></textarea>
                            <input type="hidden" name="_mc4wp_form_submit" value="1" class="form-control">
                            <input type="hidden" name="_mc4wp_form_instance" value="1" class="form-control">
                            <input type="hidden" name="_mc4wp_form_nonce" value="d8732ddff8" class="form-control">
                        </form>
                    </div>

                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body hompage-panel">
        <div class="tab-content">
            <div class="tab-pane col-sm-8 col-sm-offset-2 active" id="tab1">
                <div class="col-sm-4 center">
                    <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-middle.png">
                </div>

                <div class="col-sm-8">
                    <h2>Defy Protocol </h2>
                    <h1>EMBRACE {OPEN} SOFTWARE</h1>
                    <h3>Open Networking Summit</h3>
                    <hr>
                    <p>June 15 - 18, 2015</p>
                    <p>Santa Clara Convention Center</p>
                    <a href="#" class="btn btn-more">More Information</a>       
                </div>
            </div>
            <div class="tab-pane col-sm-8 col-sm-offset-2" id="tab2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
            <div class="tab-pane col-sm-8 col-sm-offset-2" id="tab3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

Answer 1

您不需要更改 tabs.js

你只需要像史蒂夫在 cmets 中建议的那样调用动作。这里有一些基本展示的例子。 http://getbootstrap.com/javascript/

您只需将其附加到悬停 - http://api.jquery.com/hover/