Question

我试图让jQuery中的not运算符工作。它根本不起作用。

悬停应该适用于容器ca，但它不应对其子容器noHover

起作用

我的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)'

Answer 2

jQuery not从匹配元素集中删除元素。 .noHover不是$('.ca')的匹配元素集。你可以这样做。

$('.ca').hover(function (e) {
    if(e.target.className=='hoverEffect'){
        $('.imageContainer', this).hide();
        $('.showContainer', this).show();
    }    
}, function () {
        $('.imageContainer', this).show();
        $('.showContainer', this).hide();
});

JS小提琴：http://jsfiddle.net/qsLg1ry5/6/

jQuery - not运算符不能按预期工作

2 个答案: