jquery - Plugin doesnt respond to action :hover

Question

I have a bunch of code for my plugin like this:

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();

I have no errors in console, and debugger dont catch any events when I'm hovering element I'd like to respond to my widget code. Could you give me any hints why it doesn't work?

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();

演示：小提琴