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(); 

     } 
    }); 
}); 

這將做的工作。