JQUERY hover(） 函数不适用于其子函数，使用 bootstrap 框架

JQUERY hover() function not applying to its children, using bootstrap framework

本文关键字：子函数 使用 bootstrap 框架 适用于 hover 函数 不适用 JQUERY      更新时间：2023-09-26

对，当我将鼠标悬停在类.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。引导程序会影响这一点吗？

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

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

它将隐藏所有 .navText 类。

所以我认为它有$（这个）的问题

.navText不是

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

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

正如 KJ 指出的那样，.navText 不是一个孩子，css 是最好的方法，但你也可以使用.find()它将遍历所有较低的元素。

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

navText 不是 .col-lg-6 的直接子级。请改用find：

$('.col-lg-6').hover(function () {
    $(this).find('.navText').hide();
});
相关文章：