使用简单的jquery鼠标悬停功能时遇到问题。
我有一些动态生成的图标,当我悬停时会显示一个隐藏的div,当我mouesout将隐藏div时。
<div class='lister1'>
<img src='"+path+stat1+"' />
<img src='"+path+stat2+"' />
<img src='"+path+stat3+"' />
<img src='"+path+stat4+"' />
<img src='"+path+stat5+"' />
<img src='"+path+stat6+"' />
</div>
JQuery的:
$('.hover_pop').hide();
$(document).on('hover','.lister1 img', function(){
$('.hover_pop').show(), function(){
$('.hover_pop').hide();
}
});
这将显示div,但不幸的是不会隐藏它。
答案 0 :(得分:4)
从jQuery 1.8开始,不推荐使用带有hover
方法的on
事件,您可以编写代码:
$(document).on({
mouseenter: function() {
$('.hover_pop').show()
},
mouseleave: function() {
$('.hover_pop').hide()
}
}, '.lister1 img');
答案 1 :(得分:1)
试试这个
$(document).on('hover','.lister1 img', function(){
$('.hover_pop').show()}, function(){
$('.hover_pop').hide();
});
你已经关闭了之前结束时第一个函数的大括号
<强> EDITED 强>
$(document).on({
mouseover: function() {
$('.hover_pop').show()
},
mouseout: function() {
$('.hover_pop').hide()
}
}, '.lister1 img');