Question

我有一个相当简单的设置。我的页面上有一个div，它使用CSS：hover伪类应用了一个box-shadow。在该div中是一个按钮（另一个div）。当用户将鼠标悬停在按钮上时，我想使用jQuery删除父div上的box-shadow。我认为我的jQuery看起来不错，但它没有运行。没有控制台错误。

这是包含按钮的框的HTML：

<div class="content">
    <div class="content-btn">Click Me!</div>
</div>

这是我应该在父div上切换的CSS：

.no-box-shadow {
    box-shadow: none!important;
}

这是我的jQuery：

$('.content-btn').hover(
    function() {
        $(this).parent().addClass('.no-box-shadow');
    },
    function() {
        $(this).parent().removeClass('.no-box-shadow');
    }
);

我也试过这个配置：

$('.content-btn').hover(function() {
        $(this).parent().toggleClass('.no-box-shadow');
    }
);

Answer 1

在第二段代码中，您可以更改：

$('.content-btn').hover(function() {
    $(this).parent().toggleClass('.no-box-shadow');
}
);

到

$('.content-btn').hover(function() {
    $(this).parent().toggleClass('no-box-shadow');
}
);

并查看此文档here以查找有关该功能及其用途的更多信息。

jQuery悬停toggleClass无法正常工作

1 个答案: