jQuery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

Javascript前端

有时候我们需要这个效果：当鼠标放上去的时候显示一个div，当鼠标移走的时候就将div隐藏了。代码如下，记得引入Jquyer库。(当鼠标移动到id=menu的div上的时候，显示id=list的div，然后将鼠标再次移动到id=list的div上的时候，list的div也不会隐藏）当然也可以制作成打赏效果或图片提示等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        <!--
        $(function () {
            $("#list").hide();
            $("#menu").hover(function () {
                $("#list").show();
            }, function () {
                $("#list").hide();
            })
            // 鼠标移动到list的div上的时候list div不会被隐藏
            $("#list").hover(function () {
                $("#list").show();
            }, function () {
                $("#list").hide();
            })
        });
        //-->
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="menu" style="width: 50px; height: 50px; border: 1px solid red;">
        打赏</div>
        <div id="list" style="width: 168px; height: 168px; ">
            <img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/1150383209.jpg" alt="Pulpit rock" width="168" height="168">
            <img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/4196275270.jpg" alt="Pulpit rock" width="168" height="168">
            <img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/qqqr.jpg" alt="Pulpit rock" width="168" height="168">
        </div>
    </div>
    </form>
</body>
</html>

轩宇网

_