繁体   English   中英

jQuery选择器鼠标悬停 <select>当我超过<option>

[英]Jquery selector mouseover <select> stops working when I over an <option>

我写了一个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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM