jquery中如何让对应顺序的ul悬停显示对应div的，且鼠标可移除ul到div上且div不消失

Question

<div id="header_category">  <ul class="header_category_list">     <li class="header_category_item">1</li>     <li class="header_category_item">2</li>     <li class="header_category_item">3</li>     <li class="header_category_item">4</li>     <li class="header_category_item">5</li>     <li class="header_category_item">6</li>   </ul>   <div class="header_category_contents">     <div class="header_category_content">内容1</div>     <div class="header_category_content">内容2</div>     <div class="header_category_content">内容3</div>     <div class="header_category_content">内容4</div>     <div class="header_category_content">内容5</div>     <div class="header_category_content">内容6</div> </div></div>$(function(){$("li.header_category_item").hover(    function(){    $("div.header_category_content").eq($(this).index()).show().siblings().hide();     },    function(){$("div.header_category_content").hide();});})

Answer 1

你期望的效果：

1. li鼠标经过后，对应的div展示。

2. 鼠标移出li和对应展示的div后，原来展示的div隐藏。

实现方式：
Css

.header_category_content {    display: none;
}

JS

$(function(){
    $("li.header_category_item").mouseover(        function(){    
            $("div.header_category_content").eq($(this).index()).show()
                .siblings().hide();
        }
    );
    $("#header_category,div.header_category_content").mouseleave(function() {
          $("div.header_category_content").hide();
    });
})