数据结构
网络
关系数据库管理系统 (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.com/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
