Mouseenter Hover Div显示/隐藏

Question

我试图让我的功能没有成功。我所需要的是能够滚动到我的div和X显示，然后我可以添加我想要的效果。

我使用JavaScript，因为我需要它跨浏览器兼容。我不想使用CSS，因为它在未来我想添加的内容非常有限。

<script> 
$(document).ready(function() { 
$('div.userinfo').hover({ 
    mouseenter: function() { 
     $(this).children('div.delete').show(); 
    }, 
    mouseleave: function() { 
     $(this).children('div.delete').hide(); 

    } 
    }); 
    }); 
</script> 
    <? 
echo "<div class='userinfo'><div class='delete' style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('".$streamitem_data['streamitem_id']."');\">X</div></div>" 

Answer 1

使用bind()方法，而不是悬停：

$(document).ready(function() { 
    $('div.userinfo').bind({ 
    mouseenter: function() { 
     $(this).children('div.delete').show(); 
    }, 
    mouseleave: function() { 
     $(this).children('div.delete').hide(); 
    } 
    }); 
}); 

注：如果您在以后使用jQuery添加新的DOM元素，用live()或on()，如果你不是，使用绑定方法这是非常可靠的方法。根据萤火类型错误

Answer 2

相反.hover（），像你尝试使用它，其已被废弃，不工作的，使用。对（）：

$(function() { 
    $('div.userinfo').on({ 
     mouseenter: function() { 
      $(this).children('div.delete').show(); 
     }, 
     mouseleave: function() { 
      $(this).children('div.delete').hide(); 

     } 
    }); 
}); 

这将做的工作。