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

你期望的效果：li鼠标经过后，对应的div展示。鼠标移出li和对应展示的div后，原来展示的div隐藏。实现方式：Css.header_category_content&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; }JS$(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$("li.header_category_item").mouseover(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("div.header_category_content").eq($(this).index()).show() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings().hide(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;$("#header_category,div.header_category_content").mouseleave(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("div.header_category_content").hide(); &nbsp;&nbsp;&nbsp;&nbsp;}); })