How to show placeholder when we hover on input type text

Question

i want the placeholder to be visible when we hover on the textbox.

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

Answer 1

It's not possible to currently have the functionality built into the browsers, but with a small hack, it's possible:

::-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" />

Also note the browser compatibilities.

Answer 2

This is what I did using javascript. Hope it's what you're looking for:

Suppose your textbox's id is set to "input", then

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