jquery - 插件不响应操作 :hover

Question

我的插件有一堆这样的代码:

var element = $("*[data-label]");
(function ($) {
    $.fn.Label = function (options) {
        var label = $(this).attr("data-label"),
            d = document.createElement('span'),
            t = document.createTextNode(label),
            config = $.extend({
            display: 'inline',
            position: 'absolute',
            top: '6.5em',
            padding: '0.5em',
            backgroundColor: '#383838',
            color: 'white',
            fontSize: '0.8em',
            opacity: '0.9',
        }, options);
        if (element.is(":hover")) {
            d.className = "labelShow";
            $(this).append(d);
            $('.labelShow').append(t).css(config);
        } else {
            $(".labelShow").remove();
            return false;
        }
    };

}(jQuery));

element.Label();

我在控制台中没有错误，当我悬停要响应我的小部件代码的元素时，调试器没有捕获任何事件。你能告诉我为什么它不起作用吗？

Answer 1

尝试

(function ($) {
    $.fn.Label = function (options) {
        //create a shared css def for the label
        var css = $.extend({
            display: 'inline',
            position: 'absolute',
            top: '6.5em',
            padding: '0.5em',
            backgroundColor: '#383838',
            color: 'white',
            fontSize: '0.8em',
            opacity: '0.9'
        }, options);

        //append the label span to each element in the jquery element set on which the plugin was initialized
        this.append(function () {
            return $('<span />', {
                text: $(this).data('label'),
                'class': 'labelShow'
            }).css(css).hide();
        //register mouser enter and mouse leave events for each of the elements so that the label can be displayed or hidden
        }).hover(function () {
            $(this).find('.labelShow').show();
        }, function () {
            $(this).find('.labelShow').hide();
        });
    };

})(jQuery);

var element = $("*[data-label]");
element.Label();

演示:Fiddle