CODEWITHSUNDEEP
javascripthtml
Andi Qu
Andi Qu

Reputation: 325

How do I make a link become visible when my mouse is over it in Javascript?

I want to make a link to be hidden at first, and when the cursor is over the link, it appears. So far I have:

HTML:

<a id ="contact" style="visibility:'hidden';">Contact Me</a>

Javascript:

var link = document.getElementById("contact");
function visible() { link.style.visibility = 'visible';}
function hidden() { link.style.visibility = 'hidden';}
link.onmouseover = visible;
link.onmouseout = hidden;

The onmouseout part works fine when the link is visible, but whenever I put my mouse over the link again, it doesn't become visible again. What can I do to fix it?

Upvotes: 0

Views: 80

Answers (2)

Slai
Slai

Reputation: 22876

That's usually done with CSS:

#contact       { opacity: 0; transition: opacity 1s; }
#contact:hover { opacity: 1; transition: opacity 1s; }
<a id=contact>Contact Me</a>

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 56755

Reason: here

You cannot hover over a hidden element.

Please use opacity to hide the link like so.

var link = document.getElementById("contact");
function visible() { link.style.opacity = 1;}
function hidden() { link.style.opacity = 0;}
link.onmouseover = visible;
link.onmouseout = hidden;
<a id ="contact" style="opacity:0;">Contact Me</a>

Upvotes: 2

Related Questions