Display div element on hovering over <a> tag using CSS Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report We will render the div element by hovering over the <a> tag using CSS. 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. ApproachHere, this combinator will select only 1 tag that is just next to the specified tag. To display a 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 by hovering a tag. HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; } a+div { display: none; } a:hover+div { display: block; color: green; font-size: 25px; } </style> </head> <body style="text-align:center;"> <h1>GeeksforGeeks</h1> <b> Hovering below element to see the <div> element. </b> <br><br> <a>GeeksforGeeks</a> <div> A computer science portal for Geeks. </div> </body> </html> Output: Supported Browsers:Google Chrome 1.0Microsoft Edge 12.0Firefox 1.0Opera 3.5Safari 1.0CSS 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. Comment More infoAdvertise with us Next Article How to display button on hover over div in Tailwind CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Display Element on Hover using CSS ? In web development, displaying an element on hover is a common interaction pattern used to reveal additional content or actions. Below are the various CSS approaches to achieve this effect: Table of Content Using the display propertyUsing the visibility propertyUsing the display propertyThis approac 2 min read How to display button on hover over div in Tailwind CSS ? Tailwind CSS provides a huge number of CSS utility classes that allow you to quickly apply to style and easily construct custom designs. In this article, we’ll see how to display the button when hovering over the div in TailwindCSS.Example 1: Create a <div> element and apply group and relative 2 min read Display Content on hovering Card using CSS In this article, we will see how we can create a card that displays content on hovering using the hover property using HTML and CSS.HTML Code: In this section, we will create the structure of our HTML card. Create a "div" with class name "card".Create another "div" inside the main "div" with class n 3 min read How to overlay one div over another div using CSS Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple 2 min read How to display text on hover over image using Tailwind CSS in React.js ? In this article, we'll see how the text appears on hover over an image using tailwind CSS in a ReactJS app. With the help of Tailwind CSS utility classes, we can display the text or image or anything after hovering over an element in Reactjs. Prerequisites:NPM & Node.jsReact JSTailwindCSSApproac 4 min read How to click through a div to its underlying elements in CSS ? Assume you have an HTML div element and other elements. You want to click on these underlying elements via the div. This causes issues for most developers because they can only click underlying elements when they are outside of the overlay div. For instance, you have an anchor tag, but it is obscure 3 min read Like