在div中悬停和选中复选框时突出显示问题

Question

我在div上高亮显示时遇到了问题。当我将鼠标悬停在div上时，它会正常工作，因为当我将鼠标悬停在div上并退出时，它会切换到css以突出显示它。但是，当单击事件发生时，div仍然能够在悬停时突出显示，即使我在hover函数中有禁止它这样做的语句。

这是我的jQuery代码，用于处理on hover on/off和on click事件。

$(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中的逻辑。

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文件中删除以下代码(悬停事件将由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");
    }
});