jQuery顏色選擇器懸停元素

Question

在懸停課程方面需要幫助。

如您所見，代碼必須將鼠標懸停在元素上，但是不幸的是它們不會改變顏色。 有什么想法讓一切正常嗎？

我遵循了代碼：

$('#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);
})

如果要在鼠標移開時重置顏色：

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

您可以根據需要進行調整