當我們將鼠標懸停在輸入類型文本上時如何顯示占位符

Question

我希望當我們將鼠標懸停在文本框上時，占位符是可見的。

  <input type="text" placeholder="enter your name"/>

Answer 1

當前無法將功能內置到瀏覽器中，但是如果有一個小小的技巧，則可以：

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: transparent; } ::-moz-placeholder { /* Firefox 19+ */ color: transparent; } :-ms-input-placeholder { /* IE 10+ */ color: transparent; } :-moz-placeholder { /* Firefox 18- */ color: transparent; } :hover::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #999; } :hover::-moz-placeholder { /* Firefox 19+ */ color: #999; } :hover:-ms-input-placeholder { /* IE 10+ */ color: #999; } :hover:-moz-placeholder { /* Firefox 18- */ color: #999; } 

 <input type="text" placeholder="Enter your name" /> 

還要注意瀏覽器的兼容性。

Answer 2

這就是我使用JavaScript所做的。 希望這是您要尋找的：

假設您的文本框的ID設置為“輸入”，然后

input = document.getElementById('input');

function ph () {
    input.setAttribute('placeholder','enter your name');
};

function phr () {
    input.setAttribute('placeholder', '');
};

input.addEventListener("mouseover", ph);
input.addEventListener("mouseout", phr);