顶部图标点击背景变色

@@ -5,7 +5,8 @@
  */
 var $ = require('jquery');
 
-var $footer = $('#yoho-footer');
+var $footer = $('#yoho-footer'),
+    $header = $('.yoho-header');
 
 function cookie(name) {
     var cookies = document.cookie,
@@ -152,6 +153,13 @@ function rePosFooter() {
     }
 }());
 
+$header.on('touchstart', 'a', function() {
+    $header.find('a').removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'a', function() {
+    $(this).removeClass('highlight');
+});
+
 
 //暴露公共接口
 window.cookie = cookie;

@@ -214,8 +214,13 @@ function tsAnimate() {
 
 setTimeout(tsAnimate, 3000);
 
-// 底部留出tab 的高度
+$('.home-header .search-btn').on('touchstart', function() {
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', function() {
+    $(this).removeClass('highlight');
+});
 
+// 底部留出tab 的高度
 $('#yoho-footer').css({
     'margin-bottom': '2.5rem'
 });

@@ -63,11 +63,21 @@
 
     .search-btn {
         position: absolute;
-        right: 32rem / $pxConvertRem;
+        right: 0;
         top: 0;
-        bottom: 0;
-        a{
+        width: 90rem / $pxConvertRem;
+        height: 90rem / $pxConvertRem;
+        text-align: center;
+
+        a {
+            display: block;
             color: #fff;
+            font-size: 40rem / $pxConvertRem;
+            line-height: 90rem / $pxConvertRem;
+        }
+
+        &.highlight {
+            background: rgba(200,200,200,.4);
         }
     }
 }

@@ -24,26 +24,31 @@
         background: #4f4138;
     }
 
-    .nav-back {
+    a.highlight {
+        background: rgba(200,200,200,.1);
+    }
+
+    %nav {
+        display: block;
         position: absolute;
-        left: 34rem / $pxConvertRem;
-        top: 28rem / $pxConvertRem;
-        width: 18rem / $pxConvertRem;
-        height: 32rem / $pxConvertRem;
-        background: image-url('layout/back.png') no-repeat;
-        background-size: 100% 100%;
+        top: 0;
+        width: 90rem / $pxConvertRem;
+        height: 90rem / $pxConvertRem;
+        font-size: 40rem / $pxConvertRem;
+        line-height: 90rem / $pxConvertRem;
+        color: #fff;
+        text-align: center;
         outline: none;
     }
 
+    .nav-back {
+        @extend %nav;
+        left: 0;
+    }
+
     .nav-home {
-        position: absolute;
-        top: 28rem / $pxConvertRem;
-        right: 34rem / $pxConvertRem;
-        width: 20px;
-        height: 20px;
-        background: image-url('layout/home.png') no-repeat;
-        background-size: 100% 100%;
-        outline: none;
+        @extend %nav;
+        right: 0;
     }
 
     .nav-title {

 {{#pageHeader}}
 <header class="yoho-header{{#if boys}} boys{{/if}}{{#if girls}} girls{{/if}}{{#if kids}} kids{{/if}}{{#if lifeStyle}} life-style{{/if}}">
     {{#if navBack}}
-    <a href="javascript:history.go(-1);" class="nav-back"></a>
+    <a href="javascript:history.go(-1);" class="iconfont nav-back">&#xe610;</a>
     {{/if}}
     {{#navHome}}
-    <a href="{{.}}" class="nav-home"></a>
+    <a href="{{.}}" class="iconfont nav-home">&#xe611;</a>
     {{/navHome}}
     {{#navTitle}}
     <p class="nav-title">{{.}}</p>