資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用jQuery建立滑鼠懸停時彈出div，點選後保持顯示
概述
可以使用HTML、CSS建立彈出式div，其功能可以透過Javascript庫jQuery實現。為了使div具有滑鼠懸停和點選保持的功能，jQuery內建了預定義函式。
此任務主要使用的兩個函式是：
mouseover - 當滑鼠懸停在選定元素上時，此函式將被觸發。
mouseout - 當滑鼠離開選定元素的滑鼠懸停區域時，此函式將被觸發。
演算法
步驟1 - 在文字編輯器中建立一個HTML基本結構。
步驟2 - 將jQuery CDN連結新增到HTML程式碼的head標籤中。新增CDN連結後，HTML程式碼就可以使用jQuery方法。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
步驟3 - 現在使用HTML <button>標籤建立一個HTML按鈕。
<button>Pop-Up</button>
步驟4 - 建立一個包含頁面彈出的div容器。
<div class="container"style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;"> Tutorialspoint </div>步驟5 - 現在在script標籤內建立jQuery函式。
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
步驟6 - 彈出功能已準備好用於瀏覽器。
示例
在給定的示例中，我們建立了一個HTML按鈕，並建立了一個彈出式div容器，當滑鼠懸停在按鈕上時，該容器將顯示在螢幕上。我們還使用內聯css對彈出視窗進行了樣式設定。建立的jQuery函式使用jQuery選擇器語法選擇按鈕元素，並附加mouseover事件。在mouseover事件中，它傳遞了一個回撥函式，該函式在進入滑鼠懸停div時觸發。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
<title>JQuery Pop Over</title>
</head>
<body>
<button>Pop-Up</button>
<div class="container" style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;">
Tutorialspoint
</div>
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
</body>
</html>
下面的圖片顯示了上述示例的輸出。第一張圖片顯示了靜態的簡單輸出，頁面上只有一個按鈕。
下面的第二張圖片顯示了彈出式div容器。因此，當用戶將滑鼠懸停在按鈕上時，將觸發mouseover事件，並對div容器執行display: block操作，顯示彈出式div。一旦滑鼠懸停在按鈕上，包含彈出的div容器就會顯示在螢幕上。當滑鼠離開按鈕時，彈出視窗會從瀏覽器螢幕上消失。
結論
這些型別的彈出框用於網路應用程式，例如多項選擇題網路應用程式，我們可以在其中建立一個按鈕來執行彈出框，該彈出框將彈出問題的答案提示。在這裡，我們只使用了兩個滑鼠事件，但還有更多滑鼠事件，例如：mousedown、mouseenter、mouseleave，這些事件都有其自身的功能。彈出框就像一個對話方塊，它告訴我們關於任何主題的某些資訊，它也可以是一個確認框，用於確認終端使用者在“是”或“否”方面的選擇。在mouseover和mouseout事件中，必須傳遞一個回撥函式，以便觸發特定操作。不要忘記將CDN連結新增到head標籤中，否則jQuery函式將不會執行，頁面將保持靜態，控制檯中會顯示一些錯誤。
3K+ 次瀏覽
