Question

当鼠标悬停在不同的标签上时，我试图让这个导航栏缩进三角形。我还没有找到任何东西，虽然我认为它会涉及到jquery。这是代码。

        <div class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container">

            <a href="#about" class="navbar-brand"><img class="img" src="img/Logo.png" alt="Wood Innovations" height="50" width="100"/></a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

            <div class="collapse navbar-collapse navHeaderCollapse">

                <ul class="nav navbar-nav navbar-right navbar-inverse">
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#orderform">Order Form</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="body">

        <section id="about">
            <h1>About</h1>
        </section>

        <section id="products">
            <h1>Products</h1>
        </section>

        <section id="orderform">
            <h1>Order Form</h1>
        </section>

        <section id="contact">
            <h1>Contact Us</h1>
        </section>

    </div>


.body {
text-align: center;
}

#about {
padding-top: 7%;
}

.navbar {
height: 70px;
}

.img {
float: left;
}

li {
padding-top: 7px;
}

Answer 1

这是解决方案

.tab:hover span{
    display:block;   
}

如何在bootstrap导航中添加悬停？

1 个答案: