jquery中live实现hover的效果
2014-10-18把我给崩了 的分享 加三联MM小编微信好友:sanlian2018
html
代码如下 |
|
<ul id="Hover">
<li>标题标题<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">删除</i></li>
<li>标题标题<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">删除</i></li>
<li>标题标题<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">删除</i></li>
</ul>
|
js
代码如下 |
|
// 以下代码对使用js动态增加的元素没有效果,需要使用on替换
$("li","#Hover").hover(function(){
$(".modify,.delete",$(this)).show();
},function(){
$(".modify,.delete",$(this)).hide();
});
//jquery 1.9 要使用 on 绑定事件,鼠标经过显示修改和删除效果
$("#Hover").on({
mouseenter: function(){
$(".modify,.delete",$(this)).show();
},
mouseleave: function(){
$(".modify,.delete",$(this)).hide();
}
}, "li"); // descendant selector
|
hover不是标准的事件,因此无法直接使用live进行处理,故使用以下方法代替,效果一样
代码如下 |
|
$("table tr").live({
mouseenter:
function()
{
//todo
},
mouseleave:
function()
{
//todo
}
});
|