Question

我在div上突出显示有问题。当我将鼠标悬停在div上时，它可以正常工作，因为当它悬停在鼠标上并在鼠标退出时切换css以突出显示它。但是，当发生点击事件时，即使我在悬停功能中有不允许这样做的语句，也可以在悬停时突出显示div。

这是我的jQuery代码，用于处理悬停开/关和点击事件。

$(document).ready(function() {

$('.a-choice').click(function() {
    if( !($(this).children('.a-box').find('input[type=checkbox]').is(':checked')) ){
        $(this).toggleClass('highlight_selected');
        $(this).children('.a-box').find('input[type=checkbox]').prop('checked', true);
    }

    else if( $(this).children('.a-box').find('input[type=checkbox]').is(":checked") ){
        $(this).toggleClass('highlight_selected');
        $(this).children('.a-box').find('input[type=checkbox]').prop('checked', false);
    }
});

$('.a-choice').hover(function () {
    if( !($(this).children('.a-box').find('input[type=checkbox]').is(':checked')) ){
        $(this).toggleClass("highlight_hover");
    }

    else if( $(this).children('.a-box').find('input[type=checkbox]').is(":checked") ){
        $(this).toggleClass("highlight_hover");
    }
});
});

对于视觉，这是一个小提琴：http://jsfiddle.net/djleonardo/R2JDT/

Answer 1

<强>更新

我建议您使用CSS伪类hover，以下方法允许您在选中复选框时将div颜色设置为蓝色，此外，它还简化了javascript中的逻辑。 / p>

DEMO

CSS

替换你的css规则

.highlight_selected{
    background: #bed5ed;
}

.highlight_hover{
    ...
}

以下内容：

.a-choice.highlight_selected, .a-choice.highlight_selected:hover {
    background: #bed5ed;
}

.a-choice:hover{
    ...
}

JS

从js文件中删除以下代码（hover事件将由CSS处理）：

$('.a-choice').hover(function () {
    if( !($(this).children('.a-box').find('input[type=checkbox]').is(':checked')) ){
        $(this).toggleClass("highlight_hover");
    }

    else if( $(this).children('.a-box').find('input[type=checkbox]').is(":checked") ){
        $(this).toggleClass("highlight_hover");
    }
});

悬停时突出显示问题并选择div中的复选框

1 个答案:

CSS

JS