Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display div element on hovering over <a> tag using CSS
CSS can be used to make HTML hidden components visible when hovered over. This article will teach you how to reveal the hidden elements. Utilizing an adjacent sibling selector, we can use CSS to display any HTML element when the user hovers above the <a> tag. When selecting an element that is close to or adjacent to a specific selector tag, the adjacent sibling selector is used. This combinator only chooses one tag that is adjacent to the target tag.
Let's dive into the article for getting better understanding on displaying <div> element on hovering over <a> tag using CSS.
HTML <a> tag
With its href property, the HTML element <a> (also known as the anchor element) can connect to any URL, including web pages, files, email addresses, locations on the same page, and other objects. Each <a> should have text that describes the location of the link. Pressing enter while keeping your attention on the <a> element will activate the href attribute if it is there.
Syntax
Following is the syntax for HTML <a> tag
<a href="#">..</a>
Now, let's look into the following examples on displaying the div element on hovering over <a> tag using CSS.
Example
Let's look at the following example, where we are going to hover over the hidden element using the <center> tag.
<!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://www.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>
On running the above code, the output window will pop up, displaying the link on the webpage. When the user tries to hover over the link, it will display the hidden content on the webpage.
Example
Following is an example where we are going to hover over the hidden content using the <main> tag.
<!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>
When the above program gets executed, it will generate an output representing a link on the webpage. When the user hovers the mouse over the link, it will display the content that was hidden.
Example
Consider the following example, where we are going to display the hidden element on hovering with div class="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>
On running the above code, the output window will pop up displaying the link on the webpage. If the user tries to hover over the link that content which was hidden will gets displayed on the webpage.
Example
In the following example we are going to display the hidden element on hovering with span class="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>
When the above code gets executed, it will generate an output consisting of a link on the webpage. When the user tries to hover over the link, it will display the hidden content on the webpage.
219 Views
