密码域灰色默认提示

[魔术世界中文版]

我想利用jquery在密码域的上方覆盖一个div,div中显示的是灰色的提示文字“请输入密码”
想要达到的效果是，当点击密码域获得焦点的时候，div隐藏。当密码域失去焦点
的时候首先判断密码域中是否输入了密码，如果没输入，那么div显示。如果输入了
div继续隐藏.
希望大家能给出实现的方法。

[scscms太阳光]

//div在上面肯定不行，挡了输入框

<style type="text/css">
#pass_div{
    position: relative;
    height:18px;
}
#tip_div{
    line-height: 18px;
    font: 12px/18px "宋体";
    color: #999;
    padding-left:5px;
}
#pass_div input{
    border: 1px solid #ddd;
    background: none;
    position: absolute;
    height:15px;
    width:100px;
    top:0;
}
</style>
<div id="pass_div">
    <div id="tip_div">请输入密码</div>
    <input type="password" name="password">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("input[name='password']").focus(function(){
        $("#tip_div").html("");
    }).blur(function(){
        if($(this).val()==""){
            $("#tip_div").html("请输入密码");
        }
    });
});
</script>

[Go 旅城通票]

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<input type="password" id="pwd" />
<div id="dvPwd" style="display:none;position:absolute;color:#666">请输入密码！</div>
<script type="text/javascript">
    $(function () {
        var input = $('#pwd'), dv = $('#dvPwd');
        dv.css({ width: input.outerWidth(), height: input.outerHeight(), top: input.offset().top, left: input.offset().left, display: 'block' }).click(function () { $(this).hide(); input.focus(); });
        input.blur(function () { if (this.value == '') dv.show(); });
    });
</script>

[魔术世界中文版]

感谢1楼，2楼，两位的答案都很好，不知道1楼为什么把输入框弄那么小呢？

[scscms太阳光]

height:15px; width:100px; 按需要自己调整吗