javascript - JQUERY hover() 函数不适用于其子项，使用引导框架

Question

是的，当我将鼠标悬停在类 .col-lg-6 上时，我希望隐藏类为 .navText 的 div。

HTML:

        <div class="row">
            <div class="col-lg-6">
                <a class="homeNav col-lg-12" href="index.html">
                    <div class="glyphicon glyphicon-home pull-left"></div>
                    <div class="navText">Home</div>
                </a>
            </div>
            <div class="col-lg-6">
                <a class="aboutNav col-lg-12" href="about.html">
                    <div class="glyphicon glyphicon-home pull-left"></div>
                    <div class="navText">About Me</div>
                </a>
            </div>               
        </div>

JQUERY:

        $('.col-lg-6').hover(function () {
            $(this).children('.navText').hide();
        });

这是行不通的。但是，如果我只是放:

        $('.navText').hide();

它确实有效，那么为什么我的悬停功能不能正常工作。我有点困惑，因为我 100% 确定我写给 jquery 的内容是正确的。 bootstrap 会影响这个吗？

另外，如果我使用 jquery 代码。

$('.col-lg-6').hover(function () {
    $('.navText').hide();
});

它将隐藏所有 .navText 类。

所以我认为 $(this) 有问题

Answer 1

.navText 不是 .col-lg-6 的子项。它是它的 child 的 child 。所以你的 jQuery 函数将不起作用。为什么不在这里使用 css？

.col-lg-6:hover .navText {
   display: none;
}