資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 在懸停 <a> 標籤時顯示 div 元素
CSS 可用於在懸停時顯示隱藏的 HTML 元素。本文將教你如何顯示隱藏的元素。利用相鄰兄弟選擇器，我們可以使用 CSS 在使用者將滑鼠懸停在 <a> 標籤上時顯示任何 HTML 元素。在選擇靠近或緊鄰特定選擇器標籤的元素時，使用相鄰兄弟選擇器。此組合器僅選擇一個緊鄰目標標籤的標籤。
讓我們深入瞭解本文，更好地理解如何使用 CSS 在懸停 <a> 標籤時顯示 <div> 元素。
HTML <a> 標籤
HTML 元素 <a>（也稱為錨元素）可以使用其 href 屬性連結到任何 URL，包括網頁、檔案、電子郵件地址、同一頁面上的位置和其他物件。每個 <a> 元素都應該包含描述連結位置的文字。如果存在 href 屬性，則在將焦點放在 <a> 元素上並按下 Enter 鍵時，將啟用該屬性。
語法
以下是 HTML <a> 標籤的語法：
<a href="#">..</a>
現在，讓我們看看以下關於使用 CSS 在懸停 <a> 標籤時顯示 div 元素的示例。
示例
讓我們看下面的例子，我們將使用 <center> 標籤來懸停隱藏的元素。
<!DOCTYPE html>
<html>
<style>
h2 {
color: #6C3483;
}
div {
display: none;
border: 5px double #1C2833;
}
a {
cursor: pointer;
}
a:hover+div {
display: block;
color: #DE3163;
font-size: 21px;
}
</style>
<body style="background-color:#E5E7E9 ">
<center>
<h2>TUTORIALSPOINT</h2>
<p>The Best E-Way Learning</p>
<a href="https://tutorialspoint.tw/index.htm">CLICK TO DIRECT</a>
<div> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms </div>
</center>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示連結。當用戶嘗試將滑鼠懸停在連結上時，它將顯示網頁上隱藏的內容。
示例
以下是一個使用 <main> 標籤來懸停隱藏內容的示例。
<!DOCTYPE html>
<html>
<style>
main {
text-align: center;
}
h2 {
color: #27AE60;
}
div {
display: none;
border: 3px double #7D3C98;
}
a {
display: block;
margin-top: 10px;
cursor: pointer;
}
a:hover+div {
display: block;
color: #DE3163;
font-size: 21px;
}
</style>
<body>
<main>
<h2>MSD</h2>
<strong> Mahendra Singh Dhoni </strong>
<a href="https://en.wikipedia.org/wiki/MS_Dhoni">About</a>
<div> Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman. </div>
</main>
</body>
</html>
上述程式執行後，將生成一個在網頁上顯示連結的輸出。當用戶將滑鼠懸停在連結上時，它將顯示隱藏的內容。
示例
考慮以下示例，我們將使用 div 類名 "hide" 在懸停時顯示隱藏元素。
<!DOCTYPE html>
<html>
<style>
div {
text-align: center;
}
h2 {
color: #229954;
}
.hide {
display: none;
border: 4px double #40E0D0;
}
a {
display: block;
margin-top: 12px;
cursor: pointer;
text-decoration: none;
}
a:hover+div {
display: block;
color: #DE3163;
font-size: 21px;
}
</style>
<body>
<div>
<h2>Lion</h2>
<strong> Lives In The Forest</strong>
<a href="https://en.wikipedia.org/wiki/Lion">About</a>
<div class="hide"> The lion is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body; short, rounded head; round ears; and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions are larger than females and have a prominent mane. </div>
</div>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示連結。如果使用者嘗試將滑鼠懸停在連結上，則隱藏的內容將顯示在網頁上。
示例
在下面的示例中，我們將使用 span 類名 "hide" 在懸停時顯示隱藏元素。
<!DOCTYPE html>
<html>
<style>
div {
text-align: center;
}
h2 {
color: #5B2C6F;
}
.hide {
display: none;
border: 4px double #DFFF00;
}
a {
display: block;
margin-top: 13px;
cursor: pointer;
text-decoration: none;
}
a:hover+span {
display: block;
color: #DE3163;
font-size: 21px;
}
</style>
<body>
<div>
<h2>IPL</h2>
<strong> Indian Premier League. </strong>
<a href="https://www.iplt20.com/">Check Stats</a>
<span class="hide"> The Indian Premier League is a men's Twenty20 cricket league that is annually held in India and contested by ten city-based franchise teams. The Board of Control for Cricket in India founded the league in 2007. </span>
</div>
</body>
</html>
上述程式碼執行後，將生成一個在網頁上顯示連結的輸出。當用戶嘗試將滑鼠懸停在連結上時，它將顯示網頁上隱藏的內容。
瀏覽量：324
