How To Show A `hidden` Div On Hover Using JavaScript?

Posted on by Cora Lopez
Show a `hidden` Div on Hover using JavaScript

In the previous article, we showed you how to hide an element. To continue that article, we will show you how to show a `hidden` Div on Hover using JavaScript. Read on to learn more.

Show a `hidden` Div on Hover using JavaScript in simple ways

In the previous article, we showed you 4 ways to hide an element. And this time is similar; we will show you 4 ways to show a `hidden` Div on Hover using JavaScript.

Using display: block and onmouseover event

The CSS display property allows you to define the appearance of elements.

The block value of the display property makes an element become a block element. And a block element will be displayed on the web page.

An onmouseover event occurs when the mouse hovers over an HTML element.

First, we will use the display: none property to simulate a hidden element. Next, we will get the area to hover. To show the Div, we need to create a function that changes the display property of the hidden Div to a block and assigns it to the onmouseover event. For example:

index.html:

<body>
  <main>
    <p>Hover here to show hidden div</p>
    <div id="my-div">
      <h1 id="heading">Learn to code at learnshareit.com</h1>
    </div>
  </main>
  <script type="module" src="script.js"></script>
</body>

script.js:

const myDiv = document.getElementById('my-div');
const main = document.querySelector('main');
myDiv.style.display = 'none';

// Using onmouseover event
main.onmouseover = function () {
 
  // Show hidden Div
  myDiv.style.display = 'block';

  // Hide p tag
  document.querySelector('p').style.display = 'none';
};

Output:

Using visibility: visible and onmouseover event

Unlike the display property, the visibility property hides the Div, but that Div still takes up the area.

The display property has a disadvantage: the surrounding elements are affected when a Div is hidden. To fix it, we can use visibility: hidden to hide a Div and visibility: visible to show the hidden Div. Like this:

script.js:

const myDiv = document.getElementById('my-div');
const main = document.querySelector('main');
myDiv.style.visibility = 'hidden';

// Using onmouseover event
main.onmouseover = function () {

  // Show hidden Div
  myDiv.style.visibility = 'visible';

  // Hide p tag
  document.querySelector('p').style.display = 'none';

Output:

Using fadeIn() function

Since fadeIn() is a function in jQuery, you must import jQuery before using it. You can use a CDN here.

The fadeIn() in jQuery will gradually display all hidden elements with the effect of the opacity property.

Syntax:

selector.fadeIn(speed, callback);

Parameters:

  • speed: the visible speed (text or milliseconds).
  • callback: a function will be called when the effect completes.

To show a Div by hovering, we will call the hover() function on the jQuery selector we want to hover. Next, in the hover() function, we use fadeIn(‘slow’) to show the hidden Div slowly.

script.js:

// Hide the Div
$('#my-div').hide();

// Show the Div on hover
$('main').hover(function () {
  $('#my-div').fadeIn('slow');

  // Hide the p tag
  $('p').hide();
});

Output:

Using the show() and hide() functions

In this way, we will teach you to create a cool effect when the mouse is out and the mouse is in.

Syntax:

$(selector).hide(speed, callback);
$(selector).show(speed, callback);

Parameters:

  • selector: specified HTML elements.
  • speed: hidden and visible speed. The default is 0.
  • callback: a function that will be called after the hide or show function has finished executing.

The hide() function sets the display: none CSS property for the specified element. Otherwise, the show() function will restore the display property.

First, we will hide the Div using the hide() function. Next, we’ll use the mouseover event and pass a function that uses the show() function to display the Div into it. 

To hide when the mouse is out, we use the mouseleave event and pass into it a function that uses the hide() function to hide the Div. See the example below for a better understanding.

script.js:

// Hide the Div
$('#my-div').hide();

// Show the Div on mouse over
$('main').mouseover(function () {
  $('#my-div').show();

  // Hide the p tag
  $('p').hide();
});

// Hide the Div on mouse leave
$('main').mouseleave(function () {
  $('#my-div').hide();

  // Show the p tag
  $('p').show();
});

Output:

Summary

In conclusion, we have shown you how to show a `hidden` Div on Hover using JavaScript in the simplest way. Also, we show you how to create cool effects using the show() and hide() functions. We hope you enjoyed this article.

Have a nice day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *