鼠标输入悬停分区显示/隐藏

Mouseenter Hover Div Show/Hide

本文关键字：隐藏 显示 分区 输入 悬停 鼠标      更新时间：2023-09-26

我试图让我的函数工作但没有成功。我所需要的只是能够滚动到我的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>"

使用 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（），如果你不是，请使用绑定方法，这是非常可靠的方式。

而不是 .hover（），它已被弃用并且不像你尝试使用它那样工作，使用 .on（）：

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

这将完成这项工作。

相关文章：