淘宝网搜索框鼠标经过弹出效果

7个月前 (04-29 19:28)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

淘宝网右上角搜索框鼠标经过时向下弹出特效,当用户的鼠标经过时才会弹出显示,可根据自己的需求来修改即可。

<!doctype html>  
<html><head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>淘宝网搜索框鼠标经过弹出效果_武鸣人</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}w950{width:950px;}#site-nav,#site-nav .quick-menu li,#site-nav .search .menu-hd s,#site-nav .quick-menu .cart s,#site-nav .search .menu-bd button{background:transparent url(/img/20240429_www_wuming_ren_1.png) no-repeat 999em 0;}#site-nav{background-repeat:repeat-x;background-position:0 -44px;width:auto;min-width:950px;}#site-nav-bd{position:relative;width:950px;margin:0 auto;height:22px;line-height:22px;margin:0 auto;padding:2px 0;z-index:10000;color:#000;}#site-nav a{color:#666;}#site-nav a:hover{color:#f50;}#site-nav .login-info{float:left;}#site-nav .login-info a{margin-right:8px;}#site-nav .login-info a.user-nick{margin-right:0;}#site-nav .quick-menu{position:absolute;right:0;top:1px;}#site-nav .quick-menu li{float:left;margin-left:-1px;padding:1px 10px 0 10px;background-position:right 6px;}#site-nav .quick-menu li.last{background:none;}#site-nav .quick-menu li.menu-item{position:relative;padding:1px 0 0;}#site-nav .quick-menu .cart{position:relative;padding:0;}#site-nav .quick-menu .cart a{display:block;width:36px;color:#F50;background:#FFF;border:1px solid #D8D8D8;height:18px;line-height:17px;margin-top:2px;margin-top:1px\9;padding-left:25px;padding-right:6px;padding-top:2px\9;*padding-top:1px;_padding-top:2px;}#site-nav .quick-menu .cart s{position:absolute;width:14px;height:11px;left:8px;top:7px;top:6px\9;background-position:-100px -21px;}#site-nav .menu-hd{display:block;position:relative;height:20px;line-height:17px;margin:3px 1px 0;padding:0 22px 0 10px;padding-top:1px\9;*padding-top:0;cursor:pointer;z-index:10002;}#site-nav .mytaobao .menu-hd{width:48px;}#site-nav .search .menu-hd{width:24px;}#site-nav .services .menu-hd{width:48px;}#site-nav .menu-hd b,#site-nav .quick-menu .mini-cart i{position:absolute;right:10px;top:7px;width:0;height:0;border-width:4px 4px;border-style:solid;border-color:#666 #eee #eee;font-size:0;line-height:0;-webkit-transition:-webkit-transform .2s ease-in;-moz-transition:-webkit-transform .2s ease-in;-o-transition:-webkit-transform .2s ease-in;transition:-webkit-transform .2s ease-in;}#site-nav .search .menu-hd{padding-left:25px;color:#666;}#site-nav .search .menu-hd s{position:absolute;left:9px;top:3px;*top:2px;_top:3px;width:14px;height:13px;background-position:-67px -20px;}#site-nav .menu-bd{display:none;position:absolute;right:0;top:20px;top:21px\9;*top:20px;background:#fff;border:1px solid #bfbfbf;z-index:10001;}#site-nav .search .menu-bd{_right:-1px;}#site-nav iframe.menu-bd{border:0;background:none;filter:alpha(opacity=0);float:left;z-index:-1;}#site-nav .menu-bd-panel{padding:10px 10px 6px;}#site-nav .menu-item-opp .menu-bd{left:0;}#site-nav .menu-item-opp .menu-bd s.rt{left:0;}#site-nav .menu-item-opp .menu-bd s.lt{left:auto;right:-2px;background-position:-87px -55px;}#site-nav .menu{position:relative;}#site-nav .menu:hover .menu-hd,#site-nav .hover .menu-hd{border-bottom:1px solid white;margin:2px 0 0;border:1px solid #BFBFBF;border-bottom:none;background:white;}#site-nav .menu:hover .menu-bd,#site-nav .hover .menu-bd{display:block;}#site-nav .mytaobao .menu-bd-panel{padding:8px 10px;}#site-nav .search .menu-bd{width:204px;height:66px;}#site-nav .search .menu-bd input{width:180px;border:1px solid;border-color:#878787 #b7b7b7 #b7b7b7 #878787;line-height:13px;padding:3px 1px 2px;float:left;margin-bottom:5px;}#site-nav .search .menu-bd button{width:66px;height:24px;border:0;color:#fff;background-position:0 -20px;cursor:pointer;float:left;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="site-nav"><div id="site-nav-bd"><ul class="quick-menu"> <li class="home"><a href="https://www.wuming.ren/">淘宝网首页</a></li> <li> <a href="https://www.wuming.ren/" target="_top">我要买</a> </li> <li class="mytaobao menu-item"></li> 
<li class="cart"> <a href="https://www.wuming.ren/" target="_top" rel="nofollow"> <s> </s>购物车 </a> </li> <li class="favorite"> <a href="https://www.wuming.ren/" target="_top" rel="nofollow">收藏夹</a> </li> <li class="search menu-item"> <div class="menu"> <span class="menu-hd"> <s> </s>搜索<b></b></span> <div class="menu-bd"> <div class="menu-bd-panel"> <form action="https://www.wuming.ren/" name="topSearch"> <input name="q" maxlength="60" /> <button type="submit"> 搜 索 </button> <input type="hidden" name="shopf" value="newsearch"> </form> </div> </div> </div> </li> <li class="services menu-item last"></li> 
</ul> </div></div>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/867.html

回帖

淘宝网搜索框鼠标经过弹出效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息