資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何為 span 元素新增工具提示？
CSS 代表層疊樣式表 (Cascading Style Sheets)。它由 Hakon Wium、Bert Bos 和全球資訊網聯盟於 1996 年 12 月 17 日開發。
CSS 是一種樣式表，用於指定網頁中 HTML 元素的樣式。它允許 Web 開發人員控制佈局、顏色、字型、邊距、填充、高度、寬度、背景圖片等。最新版本的 CSS 是 CSS3。
在本文中，我們將學習如何使用 HTML 和 CSS 為 span 元素新增工具提示。
建立工具提示
在 HTML 中，工具提示可用於在使用者將滑鼠懸停在元素上時指定有關該元素的附加資訊。
以下是建立滑鼠懸停時顯示的工具提示的方法：
建立兩個 <span> 元素；一個帶有類名 "tooltip"，另一個帶有類名 "tooltiptext"
使用 .tooltip 類樣式化 "tooltip" 容器。
使用 .tooltiptext 類樣式化工具提示文字。
最初，將工具提示文字的 visibility 設定為 - hidden。
使用 top、left 和 transform 屬性調整定位。
最初，將工具提示文字的 opacity 設定為 0。
為工具提示文字的 opacity 新增過渡效果。
使用 .tooltip:hover .tooltiptext 在將滑鼠懸停在 .tooltip 容器上時定位工具提示文字。
懸停時，將工具提示文字的 visibility 設定為 visible，opacity 設定為 1。
示例
在下面的示例中，我們使用上述方法將工具提示新增到 HTML span 元素：
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the tooltip */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
background-color: aquamarine;
}
/* Style the tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: seagreen;
color: #fff;
text-align: center;
padding: 5px;
margin-top: 10px;
border-radius: 10px;
position: absolute;
z-index: 1;
top: 50%;
left: 125%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s;
}
/* Show the tooltip text when hovering on the span element */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<span class="tooltip">Hover this text.
<span class="tooltiptext">Welcome to Tutorialspoint</span>
</span>
</body>
</html>
更新於：2023年8月4日
2K+ 次瀏覽
廣告