How to Display the Hidden Element on Hovering Over Hyperlink or <a> Tag

We can make the HTML hidden elements visible on hovering with CSS. With this tutorial, you can learn how to show the hidden elements. We can apply CSS to display any HTML element on hovering over the <a> tag by using an adjacent sibling selector. The adjacent sibling selector is used to select the element that is adjacent or next to the specified selector tag. This combinator selects only one tag that is next to the specified tag.

Let’s see an example and discuss each part of the code.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • You can place the <center> tag in the <body> section for aligning the content to the center(<center> tag isn’t supported in HTML5). You can also use the CSS text-align property with the “center” value instead.
  • Place the <h2> tag and write some content in it.
  • Place the <b> or <strong> tags to highlight the specified part of the text in bold to make more obvious for the user.
  • Place the <br> tag, which defines a line break.
  • Place the <a> tag which is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any other URL.
  • Create the <div> tag and write some content in it.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <center>
      <h2>W3docs</h2>
      <b> 
        Hover the element displayed below to see the div element. 
      </b> 
      <br> 
      <br>
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <div> 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </center>
  </body>
</html>

Add CSS

  • Choose color for the <h2> tag by using the color property.
  • Use the display property for the <div> and set the "none" value. It means that the element won't be shown at all.
  • Use the border property for adding a border to your <div> and set the values of border-width, border-style and border-color properties.
  • Use the cursor property with the value "pointer" for <a> tag, which means that the cursor indicates a link as a pointer.
  • Use the adjacent sibling selector. Our example selects all <div> elements that are placed immediately after <a> elements.
  • Use the display property and set the "block" value.
  • Set the color of the text by using the color property. You can choose any color you want from the color picker.
  • Set the font-size of the <div>.
h2 {
  color: #4287f5;
}

div {
  display: none;
  border: 5px double #b4b8bf;
}

a {
  cursor: pointer;
}

a:hover+div {
  display: block;
  color: #4287f5;
  font-size: 20px;
}

Here is the result of our code.

Example of displaying a hidden element on hovering with the <center> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        color: #4287f5;
      }
      div {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        cursor: pointer;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <center>
      <h2>W3docs</h2>
      <b> 
      Hover the element displayed below to see the div element. 
      </b>
      <br>
      <br>
      <a href="https://www.w3docs.com/">W3docs</a>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </center>
  </body>
</html>

Result

Hover the element displayed below to see the div element.
W3docs
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example of displaying a hidden element on hovering with the <main> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      main {
        text-align: center;
      }
      h2 {
        color: green;
      }
      div {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>W3docs</h2>
      <strong> 
        Hover the element displayed below to see the div element. 
      </strong>
      <a href=”https://www.w3docs.com/”>W3docs</a>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </main>
  </body>
</html>

In this example, we used the <main> tag instead of the <center> element . It is a new block-level element in the HTML5 specification. The tag is used to define the main content of the document. We used the text-align property with the “center” value. You can use the <strong> tag instead of the <b> tag.

Example of showing a hidden element on hovering with div class="hide":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: center;
      }
      h2 {
        color: green;
      }
      .hide {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
        text-decoration: none;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <strong> 
        Hover the element displayed below to see the div element. 
      </strong>
      <a href=”https://www.w3docs.com/”>W3docs</a>
      <div class="hide">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </div>
  </body>
</html>

In the example above, we used a <div> tag inside another <div> and added a “hide” class to it. The result is the same.

Let's see one more example, where we use a <span> tag with the class “hide”. It is an empty container. The <div> tag groups block-level elements, whereas the <span> groups inline elements.

Example of displaying a hidden element on hovering with span class="hide":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: center;
      }
      h2 {
        color: #4287f5;
      }
      .hide {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
        text-decoration: none;
      }
      a:hover + span {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <strong> 
        Hover the element displayed below to see the div element. 
      </strong>
      <a href=”https://www.w3docs.com/”>W3docs</a>
      <span class="hide"> 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </span>
    </div>
  </body>
</html>