当我们将鼠标悬停在输入类型文本上时如何显示占位符

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);