EN
CSS - display child element on hover
3
points
In this article, we would like to show you how to display child element on hover using CSS.
Quick solution:
.parent .child {
display: none;
}
.parent:hover .child {
display: block;
}
The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.
Practical example
In this example, we display child element on hover with the following steps:
- specify the style of a
parentelement, - use class selector
.parent .childto access the child element and specifydisplay: none;to make it invisible at the start, - add on-hover event to the parent element using
.parent:hoverand change the visibility of a child usingdisplay: block;so it will show up when you hover the parent.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.parent {
padding: 10px;
background: deepskyblue;
width: 100px;
height: 100px;
color: white;
}
.parent .child {
display: none; /* hides element by default */
}
.parent:hover .child {
display: block; /* shows element on hover */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child content...</div>
</div>
</body>
</html>