W3docs
en
Log in

How to Display the Hidden Element on Hovering Over a Hyperlink

Learn how to display the hidden element on hovering over a hyperlink.

Tags

We can make hidden HTML elements visible on hover using CSS. This tutorial shows how to reveal them. We can apply CSS to display any HTML element when hovering over the <a> tag by using an adjacent sibling selector. This combinator selects the first matching sibling element that immediately follows the reference element.

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

Create HTML

  • You can place a <div> with style="text-align: center;" in the <body> section to align the content to the center. (Note: The <center> tag is deprecated in HTML5; using CSS text-align: center is recommended 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, making it more obvious to the user.
  • Place the <br> tag to define a line break.
  • Place the <span class="property"> XFI6 </span> tag, which is used to insert hyperlinks to other pages, files, locations within the same page, email addresses, or any other URL.
  • Create the <div> tag and write some content in it.

How to use HTML div, center, body, h2, b, strong, br, and a tags?

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="text-align: 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>
    </div>
  </body>
</html>
Try it Yourself »

Add CSS

  • Choose a color for the <span class="property"> XFI7 </span> tag by using the color property.
  • Use the display property for the <span class="property"> XFI8 </span> and set the value to none. This hides the element completely.
  • Use the border property to add a border to your <div>, setting the values for border-width, border-style, and border-color.
  • Use the cursor property with the value pointer for the <span class="property"> XFI9 </span> tag, indicating a clickable link.
  • Use the adjacent sibling selector. Our example selects the <span class="property"> XFI10 </span> element that immediately follows the <span class="property"> XFI11 </span> element.
  • Use the <span class="property">display</span> property and set the value to block.
  • Set the text color using the <span class="property">color</span> property. You can choose any color from the color picker.
  • Set the font-size of the <div>.

How to style HTML elements using CSS color, display, border, border-width, border-style, border-color, cursor, and font-size properties?

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:

An example of how to display HTML element on hovering over the a 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>
    <div style="text-align: 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>
    </div>
  </body>
</html>
Try it Yourself »

Result

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

An example of how to display HTML element on hovering over the anchor element, using the main and strong elements for structure and emphasis.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .doc-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>
    <div class="doc-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>
    </div>
  </body>
</html>
Try it Yourself »

In this example, we used the HTML main element instead of the <span class="property"> XFI12 </span> element. It is a block-level element in the HTML5 specification used to define the main content of the document. We applied the <span class="property">text-align</span> property with the center value. You can also use the <span class="property"> XFI13 </span> tag instead of the <span class="property"> XFI14 </span> tag.

Example of showing a hidden element on hovering with a div that has the hide class:

An example of how to display the hidden HTML div element on hovering over the a tag

<!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>
Try it Yourself »

In the example above, we nested a <span class="property"> XFI15 </span> inside another <span class="property"> XFI16 </span> and added a hide class to it. The result is the same.

Let's look at one more example using a <span> tag with the hide class. It acts as an empty container. The <span class="property"> XFI17 </span> tag groups block-level elements, whereas the <span class="property"> XFI18 </span> groups inline elements.

Example of displaying a hidden element on hovering with a span that has the hide class:

An example of how to display the hidden HTML span element on hovering over the a tag

<!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>
Try it Yourself »