淘宝toolbox – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toolbox</title> <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"> </script> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/59/omhmalua/taobao_toolbox_index.css"> <style> body { background: #fff } div.toolbox { height: 300px; margin-top:-150px; } * { } </style> </head> <body> <div class="toolbox"> <ul> <li class="tb-item tb-rs-2 tb-cs-2"> <a class="tb-item-wrapper tb-item-big tb-item-hbox tb-item-huafei" href="javascript:;" title="话费充值"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-icon"></i> <p class="tb-item-text">充值</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-youxi" href="javascript:;" title="游戏充值"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-youxi"></i> <p class="tb-item-text">游戏</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-lvxing" href="javascript:;" title="旅行"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-hanglvxingye"></i> <p class="tb-item-text">旅行</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-baoxian" href="javascript:;" title="保险"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-baoxian"></i> <p class="tb-item-text">保险</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="彩票"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-caipiao"></i> <p class="tb-item-text">彩票</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="电影"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-dianying"></i> <p class="tb-item-text">电影</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="外卖"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-unie65b"></i> <p class="tb-item-text">点外卖</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="理财"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-licai"></i> <p class="tb-item-text">理财</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="找服务"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-Partner_07"></i> <p class="tb-item-text">找服务</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="音乐"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-yinle"></i> <p class="tb-item-text">音乐</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="水电煤"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-shuidianmei"></i> <p class="tb-item-text">水电煤</p> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="火车票"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-huochepiao"></i> <p class="tb-item-text">火车票</p> </div> </a> </li> </ul> </div> <script type="text/javascript"> (function() { var $tb = $('.toolbox'); var toggleTb = function(e){ $('.toolbox').toggleClass('tb-on'); } $('.toolbox').on('mouseenter','.tb-item-hbox',toggleTb).on('mouseleave','.tb-item-hbox',toggleTb); })(); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 淘宝toolbox