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.
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