Question

需要Hover课程的帮助。

正如你可以看到代码然后我必须悬停元素，但不幸的是它们不会改变颜色。有任何想法如何使一切工作？

我已遵循代码：

$('#color_mix_menu_top').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#menu > ul > li:hover > a, #menu > ul > li > a:hover, #menu > ul > li > div').css('backgroundColor', '#' + hex);
        $('#color_mix_menu_top').css('backgroundColor', '#' + hex);
}
});

Answer 1

您是否已记录或调试以验证您的jquery选择器是否正常工作？例如

console.log("" + $('#menu > ul > li:hover > a, #menu > ul > li > a:hover, #menu > ul > li > div').length)

只是为了确保你不会错过那里的东西。

Answer 2

然后是一个简单的解决方案：

$('#menu > ul > li > a, #menu > ul > li > div').data('bg', '#' + hex);

然后

$('#menu > ul > li > a').hover(function(){
     $(this).css('background', $(this).data('bg'));
}, function(){
     void(0);
})

如果你想在mouseout上重置颜色：

var currBG;
$('#menu > ul > li > a').hover(function(){
    currBG = $(this).css('background');
    $(this).css('background', $(this).data('bg'));
}, function(){
    $(this).css('background', currBG);
})

您可以根据需要稍微调整一下

jquery颜色选择器悬停元素

2 个答案: