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>