我想实现下面的效果:
1. trigger = hover , 当鼠标 hover 在元素上时触发 popover
2. 当鼠标不再 hover 在元素上且不在 popover 弹出的新层上时弹层关闭
现在的情况:
1. 可以实现 hover 时出现弹窗
2. 鼠标移出元素则关闭,即使鼠标移入到弹窗层中。
我想实现下面的效果:
1. trigger = hover , 当鼠标 hover 在元素上时触发 popover
2. 当鼠标不再 hover 在元素上且不在 popover 弹出的新层上时弹层关闭
现在的情况:
1. 可以实现 hover 时出现弹窗
2. 鼠标移出元素则关闭,即使鼠标移入到弹窗层中。
popover 可以这么用:
$().popover(options)
options,你传 "show" ,它就显示出来,传 "hide" 就会隐藏,这样的话,LZ 可以手动控制在何时显示,何时隐藏啊。
可以使用参数trigger = focus,并使用自定义hover事件来触发,例如:
$('#button').popover({
template: '<div></div>',
placement: 'bottom',
trigger: 'focus',
html: 'true',
content: '<ul class="multi">'+
'<li><a href="/1">1</a></li>'+
'<li><a href="/2">2</a></li>'+
'</ul>'
});
$('#button').hover(function(){
$(this).focus();
},function(){
// do nothings
});
10 回答11.2k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
我在 github 上面新建了一个 issue , 开发者很快就回复了(github链接)。
据他们的解释,这种实现方案被他们舍弃了。因为在移动设备的触屏上面没有 hover 这个事件,所以官方推荐使用 click 事件触发 popover。在桌面版本的浏览器中,可以通过设置 delay 参数让 popover 自动关闭。