javascript - jQuery - not 运算符无法按预期工作

Question

我正在尝试使 jQuery 中的 not 运算符起作用。它根本不起作用。

悬停应该在容器ca上工作，但不应该在其子容器上工作noHover

FIDDLE HERE

我的 HTML 结构:

<div class="ca" style="height:40%">
    <div class="imageContainer">
        <span class="hoverEffect">Some Image</span>
        <span class="noHover">NH</span>
    </div>
    <div class="showContainer">
        <span>New Image</span>
    </div>
</div>

jQuery:

$('.ca').not('.noHover').hover(function () {
    $('.imageContainer', this).hide();
    $('.showContainer', this).show();

}, function () {
    $('.imageContainer', this).show();
    $('.showContainer', this).hide();
});

Answer 1

使用不同的选择器和上下文:

$('.ca span:not(.noHover)').hover(function () {
    $('.imageContainer', $(this).closest('.ca')).hide();
    $('.showContainer', $(this).closest('.ca')).show();

}, function () {
    $('.imageContainer', $(this).closest('.ca')).show();
    $('.showContainer', $(this).closest('.ca')).hide();
});

考虑到问题更新，您可能需要一个不同的元素选择器来附加处理程序:

'.ca, .ca *:not(.noHover)'