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

代替.hover（）（已棄用並且無法像您嘗試使用它那樣工作），請使用.on（）：

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

        }
    });
});

這樣就可以了。

Answer 2

使用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（） ，否則請使用bind方法，這是非常可靠的方法。