how to make password textbox value visible when hover an icon

You will need to get the textbox via javascript when moving the mouse over it and change its type to text. And when moving it out, you will want to change it back to password. No chance of doing this in pure CSS.

HTML:

<input type="password" name="password" id="myPassword" size="30" /><img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />

JS:

function mouseoverPass(obj) {  var obj = document.getElementById('myPassword');  obj.type = "text";}function mouseoutPass(obj) {  var obj = document.getElementById('myPassword');  obj.type = "password";}

As these guys said, just change input type.
But do not forget to change type back as well.

See my simple jquery demo: http://jsfiddle.net/kPJbU/1/

HTML:

<input name="password" class="password" type="password" /><div class="icon">icon</div>

jQuery:

$('.icon').hover(function () {    $('.password').attr('type', 'text');}, function () {    $('.password').attr('type', 'password');});

I use this one line of code, it should do it:

<input type="password"       onmousedown="this.type='text'"       onmouseup="this.type='password'"       onmousemove="this.type='password'">