jQuery选择器mouseover <当我超过一个<选项>时停止工作
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>
使用mouseenter
和mouseleave
事件代替mousemove
相关文章:
- 无法在Ionic select中预先选择最后一个选项
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- 在下拉列表中选择一个选项的值
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 打开一个选项卡,并在firefox网络扩展中向其发出POST请求
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何将数组附加到下拉导航栏并禁用其中的一个选项
- 尝试添加一个选项以使用append进行选择,但没有任何结果
- 在dojo中将数据从一个选项卡绑定到另一个选项卡(打开选项卡?)
- 单击按钮进入下一个选项卡,而不是单击选项卡
- PHP Jquery选项卡:内容加载到一个选项卡's面板
- 对添加另一个选项卡的onsubmit函数停止重定向
- 用CSS和Javascript创建一个选项卡系统
- 在下拉列表中的页面加载中已经选择了一个选项,该选项也可以更改
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- 单击链接时添加另一个选项
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- jQuery - 根据标识符获取下一个选项的总值