方法:1、使用hover()方法給父元素綁定滑鼠事件,並指定兩個事件處理函數,語法「父元素.hover(經過函數,離開函數)」;2、在經過函數中,以「子元素.show()」顯示子元素;3、在離開函數中,用「子元素.hide()」隱藏子元素。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery實作滑鼠經過顯示,離開隱藏效果
#實作方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <style> div{ border: 1px solid red; height: 100px; } p{ background-color: pink; display: none; } </style> <script> $(function() { $("div").hover(function() { $("p").show(); }, function() { $("p").hide(); }); }) </script> </head> <body> <div> <p> p元素,默认是隐藏的,当鼠标经过时显示,离开时隐藏 </p> </div> <br> <span>使用鼠标悬停div元素</span> </body> </html>
說明:
hover() 方法規定當滑鼠指標停留在被選元素上時要執行的兩個函數。 方法觸發 mouseenter 和 mouseleave 事件。 注意: 如果只指定一個函數,則 mouseenter 和 mouseleave 都會執行它。 語法:$(selector).hover(inFunction,outFunction)
描述 | |
---|---|
inFunction | 必要。規定 mouseenter 事件發生時運行的函數。|
outFunction | 可選。規定 mouseleave 事件發生時運行的函數。
以上是jquery怎麼實現滑鼠經過顯示,離開隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!