Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Display div element on hovering over tag using CSS

CSS Web Development Front End Technology

CSS can be used to make HTML hidden components visible when hovered over. Using the adjacent sibling selector (+), we can display any HTML element when the user hovers over an <a> tag. This selector targets an element that immediately follows another element in the DOM.

Syntax

a:hover + element {
    display: block;
}

How It Works

The technique uses these key components

  • Hidden element: Initially set to display: none
  • Adjacent sibling selector (+): Targets the element immediately after the anchor
  • :hover pseudo-class: Triggers when mouse hovers over the link

Example 1: Basic Hover Effect

The following example shows a simple hover effect that reveals hidden content 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
        text-align: center;
    }
    
    h2 {
        color: #6C3483;
    }
    
    .hidden-content {
        display: none;
        border: 3px solid #1C2833;
        padding: 15px;
        margin: 10px;
        background-color: #f9f9f9;
    }
    
    .hover-link {
        color: #007bff;
        text-decoration: none;
        cursor: pointer;
        font-weight: bold;
    }
    
    .hover-link:hover + .hidden-content {
        display: block;
        color: #DE3163;
        font-size: 18px;
    }
</style>
</head>
<body>
    <h2>Hover to Reveal Content</h2>
    <p>Move your mouse over the link below</p>
    <a href="#" class="hover-link">Hover over me</a>
    <div class="hidden-content">
        This hidden content appears when you hover over the link above!
    </div>
</body>
</html>

A webpage with a blue link. When you hover over the link, a bordered box with hidden text appears below it.

Example 2: Multiple Hidden Elements

This example demonstrates revealing different content for multiple links 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
    }
    
    .info-section {
        margin: 20px 0;
    }
    
    .info-link {
        display: inline-block;
        padding: 10px 20px;
        background-color: #27AE60;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    
    .info-link:hover {
        background-color: #229954;
    }
    
    .hidden-info {
        display: none;
        border: 2px dashed #7D3C98;
        padding: 15px;
        margin-top: 10px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    
    .info-link:hover + .hidden-info {
        display: block;
        color: #333;
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>
</head>
<body>
    <div class="container">
        <h2>Programming Languages</h2>
        
        <div class="info-section">
            <a href="#" class="info-link">Learn about JavaScript</a>
            <div class="hidden-info">
                JavaScript is a versatile programming language used for web development, both on the client and server side.
            </div>
        </div>
        
        <div class="info-section">
            <a href="#" class="info-link">Learn about Python</a>
            <div class="hidden-info">
                Python is known for its simplicity and readability, making it perfect for beginners and powerful for experts.
            </div>
        </div>
    </div>
</body>
</html>

Two green buttons labeled "Learn about JavaScript" and "Learn about Python". Hovering over each button reveals descriptive text in a dashed border box with a smooth fade-in animation.

Key Points

  • The hidden element must immediately follow the anchor tag in the HTML structure
  • Use display: none to initially hide the element
  • The + selector only works with adjacent siblings
  • Add transitions or animations for smoother effects

Conclusion

The CSS :hover pseudo-class combined with the adjacent sibling selector provides an elegant way to show hidden content on hover. This technique is perfect for creating interactive tooltips, expandable information sections, and dynamic user interfaces without JavaScript.

Updated on: 2026-03-15T18:02:02+05:30

589 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements