鼠标悬浮事件
程序员文章站
2022-05-03 14:49:03
1.任务需求：一个按钮，一个Div，当鼠标移出按钮时，按钮显示请移入鼠标，Div隐藏，当鼠标移入时，按钮显示请移出鼠标，Div显示。 2.任务分析：监听鼠标的移入移出事件，修改元素标签的文本 3.代码实现： ......
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>
上一篇： mysql索引优化技巧