之前在装修天猫店铺时，导航上面添加了一个搜索框，感觉这个还是很方便顾客搜索的。美中不足的时，如何实现鼠标滑过时里面的文字消失。这个如果是在外面的话，完全可以用jq或者js来实现，先定义一个变量来接收值，然后再设置滑过时与离开时的清空与恢复值即可。但在天猫里面不是设计师不能写js，又该如何实现呢？下面就来分享一下变形实现的效果。如下图：

即：鼠标滑过搜索框时，里面的文字隐藏；离开时又显示出来。

由于时间关系，先说下已开通旺铺css店铺的操作方法，未开通旺铺css店铺的方法有时间时再做补充。下面来以自家店铺的导航上搜索框演示给亲看，店铺预览地址：maerduke.tmall.com。附源码如下：(已省去不必要的成份，只保留核心效果区源码)

css样式：

/*导航搜索框*/
.ylsj_inp{float:right;margin-top:3px;background:url(http://img03.taobaocdn.com/imgextra/i3/1758846006/T2qi0gXhRbXXXXXXXX_!!1758846006.png) no-repeat;width:182px;height:23px;line-height:23px;}
.ylsj_inp input,.user-inp_text{background-color:transparent;float:left;height:21px;line-height:21px;border:0;}
.ylsj_k136{width:136px;}
.ylsj_k43 {width:45px;height:23px;line-height:23px;text-indent:-9999px;cursor:pointer;}
.ylsj-inp_text{display:inline-block;float:left;position:relative;}
.ylsj-inp_text_1{position:absolute;top:0;left:0; }
/*滑过时隐藏搜索框内的文字*/
.ylsj-inp_text:hover .ylsj-inp_text_1{display:none;}

html模块内容：

<div class="ylsj_inp">
　<span class="ylsj-inp_text"><span class="ylsj-inp_text_1">马丁靴</span><input class="J_TWidget ylsj_k136" name="keyword" type="text"></span>
　<input class="ylsj_k43" type="submit" value="搜索">
</div>

当然，这个点击“搜索”按钮后并不会出现正确的搜索结果是因为没有获取搜索框内的值，这样做只是形式上模仿了而本质上是没有的。变化效果就不写了，可自由发挥。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-12-27/138.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。