jquery中如何讓對應順序的ul懸停顯示對應div的，且鼠標可移除ul到div上且div不消失

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

我想要實現(xiàn)的時候當鼠標從li移入對應的div.header_category_content，對應的div.header_category_content還能繼續(xù)顯示，并可以點擊里面的內容。

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

})

回答

編輯回答

負我心

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>
··
問題問的看不懂，上面是讓對應順序的li懸停顯示對應div的一種代碼邏輯。

2018年6月4日 12:55

編輯回答

離殤

你期望的效果：

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

實現(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