1.任务需求:一个按钮,一个Div,当鼠标移出按钮时,按钮显示请移入鼠标,Div隐藏,当鼠标移入时,按钮显示请移出鼠标,Div显示。
2.任务分析:监听鼠标的移入移出事件,修改元素标签的文本
3.代码实现:
<body> <button id="hover">请移入鼠标</button> <div style="height: 150px; 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>