当表单字段处于活动状态时显示div

时间:2013-02-04 17:03:15

标签: jquery css focus blur

我需要在表单字段处于活动状态时创建一个包含提示的div,并在表单字段不再处于活动状态时消失。我的表单字段都有ID,例如#monthly_rent,我的提示有一个.monthly_rent_tip类。我怎样才能使它在必要时出现并消失。

以下是我目前拥有但不起作用的代码。

<script type="text/javascript">
jQuery(document).ready(function()
   {
        jQuery('.tip.left.monthly_rent_tip').hide(); //hide 
        jQuery('#monthly_rent').focus(function(){  
            jQuery('.tip.left.monthly_rent_tip').show(); //show
        }).blur(function(){  
            jQuery('.tip.left.monthly_rent_tip').hide(); //hide again
        });

  });
</script>

tip div的CSS在这里:

.tip {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #f18500;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

.monthly_rent_tip {
top:1060px;
left:-130px;
}

目前这没有任何作用,任何人都可以指出我正在做的错误。

1 个答案:

答案 0 :(得分:1)

结帐这个问题的例子

http://jquerytools.org/demos/tooltip/form.html

这是同一主题的stackoverflow问题

JQuery form tooltip