提示遮罩层和表单输入框提示内容的显示隐藏

html代码：

<ul class="tit02ul">
 <li class="tit02_lidiv1">
 <div class="lidiv lidiv1">01<br />团队旅游</div>
 <div class="lidiv_on lidiv1_on">
<p class="p1">01</p>
<p class="p2">企业团队出游</p>
<p class="p3">为企业提供员工团队旅游<br />个性化定制团队出游服务</p>
<p class="p4">团队旅游<br /><img src="images/xq01_on_tb.png"></p>
 </div>
 </li>
 <li class="tit02_lidiv2">
        <div class="lidiv lidiv2">02<br />员工奖励出游</div>
        <div class="lidiv_on lidiv2_on">
          <p class="p1">02</p>
          <p class="p2">员工奖励出游</p>
          <p class="p3">为企业提供员工奖励出游<br />个性化定制团队出游服务</p>
          <p class="p4">员工奖励出游<br /><img src="images/xq02_on_tb.png"></p>
        </div>
      </li>
 <li class="tit02_lidiv3">
        <div class="lidiv lidiv3">03<br />商旅出行</div>
        <div class="lidiv_on lidiv3_on">
          <p class="p1">03</p>
          <p class="p2">商旅出行</p>
          <p class="p3">为企业提供商旅出行<br />个性化定制商旅出行服务</p>
          <p class="p4">商旅出行<br /><img src="images/xq03_on_tb.png"></p>
        </div>
      </li>
 <li class="mr0 tit02_lidiv4">
        <div class="lidiv lidiv4">04<br />回馈客户</div>
        <div class="lidiv_on lidiv4_on">
          <p class="p1">04</p>
          <p class="p2">回馈客户</p>
          <p class="p3">为企业提供回馈客户出行<br />个性化定制回馈客户服务</p>
          <p class="p4">回馈客户<br /><img src="images/xq04_on_tb.png"></p>
        </div>
      </li>
 </ul>

<form>
 <table class="subtable">
 <tr>
 <td><input name="" value="联系人" class="put_text"></td>
 <td><input name="" value="公司名称" class="put_text"></td>
 <td><input name="" value="公司邮箱" class="put_text"></td>
 <td><input name="" value="手机号码" class="put_text"></td>
 </tr>
 <tr>
 <td colspan="4"><textarea class="put_text">说明：请填写您的要求，如：公司集体省内游</textarea></td>
 </tr>
 <tr>
 <td colspan="2" align="left"><img src="images/submit.jpg"></td>
 <td colspan="2" align="right"><span class="red">*</span> 提交信息后，一个工作日内我们就会给您回复，我们交竭诚为您服务</td>
 </tr>
 </table>
 </form>

CSS代码：

.tit02ul li{width: 291px;height: 397px;margin-right: 10px;display: inline-block;overflow: hidden;position:relative}
.tit02ul .tit02_lidiv1{background-image:url(../images/xq01.jpg)}
.tit02ul .tit02_lidiv1:hover{background-image:url(../images/xq01_on.png)}
.tit02ul .tit02_lidiv2{background-image:url(../images/xq02.jpg)}
.tit02ul .tit02_lidiv2:hover{background-image:url(../images/xq02_on.png)}
.tit02ul .tit02_lidiv3{background-image:url(../images/xq03.jpg)}
.tit02ul .tit02_lidiv3:hover{background-image:url(../images/xq03_on.png)}
.tit02ul .tit02_lidiv4{background-image:url(../images/xq04.jpg)}
.tit02ul .tit02_lidiv4:hover{background-image:url(../images/xq04_on.png)}
.lidiv{font-size: 24px;color: #FFF;margin-top: 280px;line-height: 40px}
.lidiv_on{position:absolute;width: 291px;height:397px;top:0;z-index:100;background-color:#000;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;font-size:18px;color:#FFF;}
.lidiv_on .p1{margin-top: 75px;font-size: 20px;}
.lidiv_on .p2{margin-top: 20px;font-size: 24px;}
.lidiv_on .p3{margin-top: 20px}
.lidiv_on .p4{margin-top: 58px}
.lidiv_on{display: none;}

$(document).ready(function(){
//提示遮罩层的显示与隐藏
$('.tit02ul li').mouseover(function(){
 $(this).children(".lidiv").hide();
 $(this).children(".lidiv_on").show();
});
$('.lidiv_on').mouseout(function(){
$(this).prev(".lidiv").show();
$(this).hide();
});
//表单输入框提示内容与显示与隐藏
$('.put_text').bind({
focus:function(){
if ($(this).val() == this.defaultValue){
$(this).val("");
}
},
blur:function(){
if ($(this).val() == ""){
$(this).val(this.defaultValue);
}
}
});
})