jQuery选择器mouseover <当我超过一个<选项>时停止工作

jQuery selector mouseover <select> stops working when I over an <option>

本文关键字:一个 选项 停止工作 mouseover 选择器 jQuery      更新时间:2023-09-26

我写了一个jQuery工具提示插件,它是:

 (function ($) {
    $.fn.meliaTooltip = function (options) {
        var defaults = {
            tooltip: '.miTooltip',
            tiempo_espera: 0,
            seguir_raton: true,
            ajuste_top: 0,
            ajuste_left: 0,
            fade_time: 300,
            bind_mode: 'click'
        };
        var opts = $.extend(defaults, options);
        $(this).each(function() {
            $(this).bind(opts.bind_mode,function(e) {
               // alert('has hecho '+opts.bind_mode+' en '+$(this).attr('id'));
                /*Guardamos el selector del disparador y de tooltip en una variable*/
                var disp = $(this);
                
                var tip = disp.next(opts.tooltip);
                var tip_text = tip.html();
                
                var new_content = '<span class="melia_tooltip_left"></span ><span class="melia_tooltip_contenido">' + tip_text + '</span ><span class="melia_tooltip_right"></span ><span class="melia_tooltip_bottom"></span >';
                tip.html(new_content);
                if (typeof t != 'undefined') {
                    /*reiniciamos tiempo_espera*/
                    clearTimeout(t);
                }
                //alert('has hecho '+opts.bind_mode+' en '+disp.attr('id')+'y ahora vamos a mostrar'+tip_text+'que esta en '+tip.attr('class'));
                $(tip).css({
                        //colocamos el tooltip según el ratón y el tamaño del tooltip
                        left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                        top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                }).fadeIn(opts.fade_time);
                //alert(e.clientX - ($(tip).width() / 2) + opts.ajuste_left);
                //alert(e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top);
                
                
            });
            $(this).bind('mousemove', function(e) {
                if (opts.seguir_raton) {
                    var disp = $(this);
                    var tip = $(this).next(opts.tooltip);
                    $(tip).css({
                            /*Pues recolocamos el tooltip*/
                            left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                            top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                        });
                }
            });
            $(this).mouseout(function() {
                /*añadimos tiempo_espera por si el usuario se sale sin querer*/
                t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
            });
        });
    };
})(jQuery);

$('select#id).meliaTooltip({})工作得很好,但是当我将鼠标移到其中一个选项上时,工具提示会淡出,我如何保持子选择器?

即使我把它应用到另一种标签上,例如:

<div id="selector"><div><div>Still work here</div></div>

使用mouseentermouseleave事件代替mousemove