Display div element on hovering over <a> tag using CSS
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.
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: 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.
Please Login to comment...