CSS - display child element on hover

0 points
Created by:

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:

  1. specify the style of a parent element,
  2. use class selector .parent .child to access the child element and specify display: none; to make it invisible at the start,
  3. add on-hover event to the parent element using .parent:hover and change the visibility of a child using display: block; so it will show up when you hover the parent.
// ONLINE-RUNNER:browser;

<!doctype html>

    .parent {
      width: 100px;
      height: 100px;
      color: white;
      padding: 10px;
      background: deepskyblue;

    .parent .child {
      display: none;  /* hide element at the start */

    .parent:hover .child {
      display: block;  /* show element on hover */

  <div class="parent">
    <div class="child">Child content...</div>


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂