javascript - 检查元素是否悬停在 jQuery 上

Question

如何在 jquery 或 js 中检查光标是否悬停在上面。

我已经尝试过 $('#id').is(':hover') 但这似乎根本不起作用。

我必须提到，我正在 hover() 函数内调用此行，这可能是问题所在吗？

这是我的代码:

$(document).ready(function() { 

    /* On hover function, over the menu items */
    $('nav ul li').hover(function(){
        $('nav ul li').css("background-color", "");
        $('#append').css("background-color", "");
        $(this).css("background-color", "#9999FF"); 
        $('#append').css("background-color", "#9999FF"); 

        var append;
        if($('#menu-item-12')) {
            append = 'news';
        }else if($('#menu-item-9:hover')) {
            append = 'account';
        }else if($('#menu-item-11').is(':hover')) {
            append = 'check out';
        }
        $('#appendp').empty();
        $('#appendp').append(document.createTextNode(append));

    });

希望有人能告诉我出了什么问题。

这是jsfiddle链接，我尽力了:) https://jsfiddle.net/xsv325ef/

Answer 1

一个很好的方法是将相关文本存储到对象文字中，
并根据悬停元素 ID 调用文本:

fiddle demo

$(function() { // DOM ready shorthand ;)

    var $appendEl = $('#appendp');
    var id2text = {
        "menu-item-12" : "unlock this crap",
        "menu-item-9"  : "check your gdmn account",
        "menu-item-11" : "check the hell out"
    };

    $('nav ul li').hover(function(){
        $appendEl.text( id2text[this.id] );
    });

});

关于颜色...使用 CSS :hover