鼠标悬浮事件_莺呼_前端开发者

1.任务需求:一个按钮,一个Div,当鼠标移出按钮时,按钮显示请移入鼠标,Div隐藏,当鼠标移入时,按钮显示请移出鼠标,Div显示。

2.任务分析:监听鼠标的移入移出事件,修改元素标签的文本

3.代码实现:

<body>

<button id="hover">请移入鼠标</button>

<div style="height: 150px;width: 150px;background: coral;margin-top: 20px;" id="content"></div>


<script src="jquery-3.4.1.min.js"></script>
<script>
    $("#hover").mouseover(function () {
        $("#content").show();
        $("#hover").text("请移开鼠标");
    });
    $("#hover").mouseout(function () {
        $("#content").hide();
        $("#hover").text("请移入鼠标");
    })

</script>
</body>
<body>

<button id="hover">请移入鼠标</button>

<div style="height: 150px;width: 150px;background: coral;margin-top: 20px;" id="content"></div>


<script src="jquery-3.4.1.min.js"></script>
<script>
    $("#hover").mouseover(function () {
        $("#content").show();
        $("#hover").text("请移开鼠标");
    });
    $("#hover").mouseout(function () {
        $("#content").hide();
        $("#hover").text("请移入鼠标");
    })

</script>
</body>

<body><button id=”hover”></button><div style=”height: 150px;width: 150px;background: coral;margin-top: 20px;” id=”content”></div><script src=”jquery-3.4.1.min.js></script><script>
$(
#hover).mouseover(function () {
$(
#content).show();
$(
#hover).text(请移开鼠标);
});
$(
#hover).mouseout(function () {
$(
#content).hide();
$(
#hover).text(请移入鼠标);
})

</script></body>

 

» 本文来自:前端开发者 » 《鼠标悬浮事件_莺呼_前端开发者》
» 本文链接地址:https://www.rokub.com/73316.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!