X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

Display the Hidden Element on Hovering Over Hyperlink or <a> tag

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

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

1.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 CSS text-align property with the value “center” instead.
  • Place <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 <br> tag which defines a line break.
  • Place <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 <div> tag and write some content in it.
<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>

2. Add CSS

  • Choose color for the <h2> tag by using color property.
  • Use 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.
  • 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 display property and set the "block" value.
  • Set the color of the text by using 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

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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>

Let’s see another example and try to discuss it.

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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 <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 text-align property with the value “center”. You can use the <strong> tag instead of the <b> tag.

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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 this example, we use <div> tag inside another <div> tag and add “hide” class for it. The result is the same.

Let’s see another example.

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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>

In this example, we use <span> tag with the class “hide”. It is an empty container. The <div> tag groups block-level elements, whereas the <span> groups inline elements.


Do you find this helpful?

Related articles