senior options hover

@@ -185,29 +185,33 @@
                                     <span class="iconfont">&#xe600;</span>
                                     <span class="iconfont">&#xe600;</span>
 
 
                                     <div class="senior-up-icon"></div>
                                     <div class="senior-up-icon"></div>
-
-                                    <div class="senior-sub hide" data-attr="{{attr}}">
-                                        {{#if showMulti}}
-                                            <span class="multi-select">多选 +</span>
-                                        {{/if}}
-                                        <ul class="clearfix check-container">
-                                            {{#each sub}}
-                                                <li class="attr">
-                                                    <a href="{{href}}">
-                                                        <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
-                                                        <span>{{name}}</span>
-                                                    </a>
-                                                </li>
-                                            {{/each}}
-                                        </ul>
-                                        <div class="btns">
-                                            <button class="multi-select-ok dis">确定</button>
-                                            <button class="multi-select-cancel">取消</button>
-                                        </div>
-                                    </div>
                                 </li>
                                 </li>
                             {{/each}}
                             {{/each}}
                         </ul>
                         </ul>
+
+                        <div class="senior-sub-wrap">
+                            {{#each seniorChose}}
+                                <div class="senior-sub hide" data-attr="{{attr}}">
+                                    {{#if showMulti}}
+                                        <span class="multi-select">多选 +</span>
+                                    {{/if}}
+                                    <ul class="clearfix check-container">
+                                        {{#each sub}}
+                                            <li class="attr">
+                                                <a href="{{href}}">
+                                                    <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
+                                                    <span>{{name}}</span>
+                                                </a>
+                                            </li>
+                                        {{/each}}
+                                    </ul>
+                                    <div class="btns">
+                                        <button class="multi-select-ok dis">确定</button>
+                                        <button class="multi-select-cancel">取消</button>
+                                    </div>
+                                </div>
+                            {{/each}}
+                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
             {{/if}}
             {{/if}}

@@ -32,6 +32,12 @@ var $udPrice = $('.ud-price-range'),
 //分类相关变量
 //分类相关变量
 var $sortSub = $('.sort-sub-wrap');
 var $sortSub = $('.sort-sub-wrap');
 
 
+//高级选项相关变量
+var $seniorSubWrap = $('.senior-sub-wrap'),
+    $seniorAttrWrap = $('.senior-attr-wrap');
+
+var seniorHoverTime, hoveredIndex;
+
 //清除checkbox选中状态
 //清除checkbox选中状态
 function clearChecked($checkbox) {
 function clearChecked($checkbox) {
     $checkbox.removeClass('checked').html(checkUnicode.unchecked);
     $checkbox.removeClass('checked').html(checkUnicode.unchecked);
@@ -241,15 +247,26 @@ if ($udPrice.length > 0) {
 }
 }
 
 
 //【高级选项】鼠标移入显示子项
 //【高级选项】鼠标移入显示子项
-$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
-    $(this).children('.senior-sub').removeClass('hide');
+$seniorAttrWrap.on('mouseenter', '.attr', function() {
+    var index = $(this).addClass('hover').index();
+
+    $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
 }).on('mouseleave', '.attr', function() {
 }).on('mouseleave', '.attr', function() {
-    $(this).children('.senior-sub').addClass('hide');
+    var $this = $(this),
+        index = $this.index();
+
+    hoveredIndex = index;
+
+    seniorHoverTime = setTimeout(function() {
+        $seniorSubWrap.children('.senior-sub:eq(' + index + ')').addClass('hide');
+        $this.removeClass('hover');
+        hoveredIndex = -1;
+    }, 100);
 });
 });
 
 
 //【高级选项】多选
 //【高级选项】多选
 $('.senior-sub').on('click', '.multi-select', function() {
 $('.senior-sub').on('click', '.multi-select', function() {
-    $(this).closest('.sub').addClass('multi');
+    $(this).closest('.senior-sub').addClass('multi');
 }).on('click', '.multi-select-ok', function() {
 }).on('click', '.multi-select-ok', function() {
     var $btn = $(this),
     var $btn = $(this),
         $sub = $btn.closest('.senior-sub'),
         $sub = $btn.closest('.senior-sub'),
@@ -266,4 +283,10 @@ $('.senior-sub').on('click', '.multi-select', function() {
     });
     });
 
 
     uriLoc($sub.data('attr'), val);
     uriLoc($sub.data('attr'), val);
+}).on('mouseenter', function() {
+    clearTimeout(seniorHoverTime);
+}).on('mouseleave', function() {
+    $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
+    $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
+    hoveredIndex = -1;
 });
 });

@@ -218,18 +218,27 @@
         margin-bottom: -6px;
         margin-bottom: -6px;
         margin-right: 5px;
         margin-right: 5px;
     }
     }
-    
-    .senior-attr-wrap > .attr {
+
+    .senior {
+        padding-bottom: 6px;
+
+        .attr-content {
+            position: relative;
+        }
+    }
+
+    .senior-attr-wrap {
         position: relative;
         position: relative;
-        
-        &:hover {
-            > .iconfont {
-                visibility: hidden;
-            }
+    }
 
 
-            .senior-up-icon {
-                display: block;
-            }
+    .senior-attr-wrap > .attr:hover,
+    .senior-attr-wrap > .attr.hover {
+        > .iconfont {
+            visibility: hidden;
+        }
+
+        .senior-up-icon {
+            visibility: visible;
         }
         }
     }
     }
 
 
@@ -238,7 +247,7 @@
         position: absolute;
         position: absolute;
         padding: 15px 0;
         padding: 15px 0;
         left: 0;
         left: 0;
-        width: 1050px;
+        right: 0;
         top: 39px;
         top: 39px;
         background: #fff;
         background: #fff;
         border: 1px solid #eaeceb;
         border: 1px solid #eaeceb;
@@ -259,15 +268,14 @@
     }
     }
 
 
     .senior-up-icon {
     .senior-up-icon {
-        position: absolute;
-        width: 15px;
+        width: 100%;
         height: 9px;
         height: 9px;
         z-index: 1;
         z-index: 1;
-        left: 50%;
-        margin-left: -18px;
-        display: none;
+        margin-left: -11px;
+        visibility: hidden;
 
 
         background: image-url('product/senior-up.png') no-repeat;
         background: image-url('product/senior-up.png') no-repeat;
+        background-position-x: 50%;
     }
     }
 
 
     .checkbox {
     .checkbox {