Jquery.js是一款非常實用的js庫,它可以讓我們更加便捷地操作DOM、事件、樣式等。其中,鼠標懸停提示(Tooltip)功能也是常用的一個特性。
Jquery.js使用mouseover和mouseout事件實現(xiàn)鼠標懸停提示。我們可以先定義一個class樣式,稱之為tooltip,用于設置提示框的樣式。然后,使用Jquery.js的mouseover和mouseout事件,監(jiān)聽鼠標進入和離開時的動作,并動態(tài)生成提示框。
.tooltip { position: absolute; z-index: 9999; background-color: #333; color: #fff; font-size: 12px; padding: 5px; border-radius: 3px; } $("a.tooltip").mouseover(function(event) { $("") .addClass("tooltip") .text($(this).attr("title")) .appendTo("body") .css({ "top": event.pageY + 15 + "px", "left": event.pageX + "px" }); }).mouseout(function() { $("div.tooltip").remove(); });
在上述代碼中,我們首先選中需要添加鼠標提示功能的元素。這里以a標簽為例。當鼠標進入元素時,使用Jquery.js的mouseover事件處理函數(shù),創(chuàng)建一個新的div元素,并根據(jù)鼠標當前位置設置提示框的位置。同時,我們將原本的title屬性的內容復制到提示框中。當鼠標離開元素時,使用Jquery.js的mouseout事件處理函數(shù),將已經創(chuàng)建的提示框移除。
通過這種方式,我們可以輕松地為網(wǎng)頁中的各個元素添加鼠標懸停提示功能。如果需要添加更復雜的提示框樣式或動畫效果,也可以通過改變tooltip樣式或者事件處理函數(shù)來實現(xiàn)。
上一篇vue用css嗎