Open In App
Related Articles

Display div element on hovering over <a> tag using CSS

Improve Article
Save Article
Like Article

In this article, we will know how to render the div element by hovering over the <a> tag using CSS, & will understand its implementation through the example. We can apply an adjacent sibling CSS selector property to the <a> tag that will display the hidden div element’s content while hovering over it. The Adjacent sibling selector is a CSS Combinators, used to select the element that is adjacent or the element that is next to the specified selector tag. CSS combinators explain the relationship between two selectors. CSS selector is used to apply the various styling properties to the selected elements based on the patterns & it can be a simple selector or a complex selector that consists of more than one selector connected using combinators. 

Here, this combinator will select only 1 tag that is just next to the specified tag. To display div element using CSS on hover a tag:

  • First, set the div element invisible i.e display:none;.
  • By using the adjacent sibling selector and hover on a tag to display the div element.

Example: This example illustrates how to display the div element on hovering a tag.


<!DOCTYPE html>
    h1 {
        color: green;
   a + div {
        display: none;
    a:hover + div {
        display: block;
        color: green;
        font-size: 25px;
<body style="text-align:center;">
    <h1>GeeksforGeeks</h1> <b>
      Hovering below element to see
      the <div> element.
    <div> A computer science portal for Geeks. </div>


Supported Browsers: The browser that the adjacent sibling CSS selector property, are listed below:

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Internet Explorer 7.0
  • Opera 3.5
  • Safari 1.0

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 29 Sep, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials