當鼠標懸停在Javascript中時，如何使鏈接可見？

Question

我想先使鏈接隱藏，然后當光標位於鏈接上方時，它就會出現。 到目前為止，我有：

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;

當鏈接可見時，onmouseout部分可以正常工作，但是每當我再次將鼠標放在鏈接上時，它就不會再次顯示。 我該如何解決？

Answer 1

原因： 在這里

您不能將鼠標懸停在隱藏的元素上。

請使用不透明度來隱藏鏈接，如下所示。

 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> 

Answer 2

通常用CSS完成：

 #contact { opacity: 0; transition: opacity 1s; } #contact:hover { opacity: 1; transition: opacity 1s; } 

 <a id=contact>Contact Me</a>