W3Docs

Appearance

  1. Snippets
  2. CSS
  3. Display the Hidden Element on Hovering Over a Hyperlink

How to Display the Hidden Element on Hovering Over a Hyperlink ​

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 <a> 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?

html
<!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>

Add CSS ​

  • Choose a color for the &lt;h2&gt; tag by using the color property.
  • Use the display property for the <div> 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 <a> tag, indicating a clickable link.
  • Use the adjacent sibling selector. Our example selects the <div> element that immediately follows the <a> element.
  • Use the display property and set the value to block.
  • Set the text color using the color 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?

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

html
<!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>

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.

html
<!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>

In this example, we used the HTML main element instead of the <center> element. It is a block-level element in the HTML5 specification used to define the main content of the document. We applied the text-align property with the center value. You can also use the <strong> tag instead of the <b> 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

html
<!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 nested a <div> inside another <div> 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 <div> tag groups block-level elements, whereas the <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

html
<!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>

Dual-run preview — compare with live Symfony routes.