jquery中如何讓對應(yīng)順序的ul懸停顯示對應(yīng)div的，且鼠標(biāo)可移除ul到div上且div不消失

不好意思我的問題沒有問的太清楚，其實(shí)我的實(shí)際訴求是這樣的。
我的ul.header_category_list 和div.header_category_contents是通過定位后的左右結(jié)構(gòu)，我寫的jquery的mouseover和mouseout只能實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在第n個li時第n個div.header_category_content 顯現(xiàn)。但是當(dāng)鼠標(biāo)從li移動進(jìn)入對應(yīng)的div.header_category_content的時候，對應(yīng)的div.header_category_content會立刻消失，不能顯示了。

我想要實(shí)現(xiàn)的時候當(dāng)鼠標(biāo)從li移入對應(yīng)的div.header_category_content，對應(yīng)的div.header_category_content還能繼續(xù)顯示，并可以點(diǎn)擊里面的內(nèi)容。

  <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">內(nèi)容1</div>
    <div class="header_category_content">內(nèi)容2</div>
    <div class="header_category_content">內(nèi)容3</div>
    <div class="header_category_content">內(nèi)容4</div>
    <div class="header_category_content">內(nèi)容5</div>
    <div class="header_category_content">內(nèi)容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();}
);

})

回答

編輯回答

負(fù)我心

CSS樣式

··

    <style type="text/css">
        #content-wrpper div {
            display: none;
        }
    </style>

··

js代碼

··
<script type="text/javascript">

var lis = $("li");
for (var i = 0; i < lis.length; i++) {
    //利用閉包保存變量i
    (function(i){
        lis[i].onmouseover = function(){
            $("#content-wrpper div").hide();
            $("#content-wrpper div").eq(i).show();
        }
    })(i)
}

</script>
··
問題問的看不懂，上面是讓對應(yīng)順序的li懸停顯示對應(yīng)div的一種代碼邏輯。

2018年6月4日 12:55

編輯回答

離殤

你期望的效果：

li鼠標(biāo)經(jīng)過后，對應(yīng)的div展示。
鼠標(biāo)移出li和對應(yīng)展示的div后，原來展示的div隱藏。

實(shí)現(xiàn)方式：
Css

.header_category_content {
    display: none;
}

$(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();
    });
})

2017年8月2日 16:35