jQuery鼠標經過提示信息是網頁開發中常用的功能,可以方便地為用戶提供提示和引導,增強了用戶體驗。下面是一個簡單的實現示例:
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <div class="tooltip">鼠標經過我 <span class="tooltiptext">這是提示信息</span> </div> </body> </html>
上面的代碼中,我們先定義了一個包含提示信息的元素,并將其隱藏。然后用CSS對樣式進行了設置。最后,在包含提示信息的元素的父級元素上添加了class="tooltip",并用jQuery實現鼠標經過時顯示提示信息的功能。
實現代碼如下:
$(document).ready(function(){ $(".tooltip").hover(function(){ $(this).children(".tooltiptext").fadeIn(200); },function(){ $(this).children(".tooltiptext").fadeOut(200); }); });
通過上述代碼,我們先用$()函數選取擁有class="tooltip"的元素,再用hover()方法實現鼠標經過和離開時的動作。
鼠標經過和離開時所執行的動作分別是fadeIn()和fadeOut()方法,它們用來實現元素的顯示和隱藏效果。200是動畫執行的時間,單位是毫秒。
最后,我們就可以在網頁中實現鼠標經過提示信息的功能了!