首頁猿問 jquery中如何讓對應(yīng)順序的ul...

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

JavaScript

慕仙森 2018-08-18 20:28:06

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

查看完整描述

1 回答

呼喚遠方

TA貢獻1856條經(jīng)驗獲得超11個贊

你期望的效果：

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

實現(xiàn)方式：
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();
    });
})

反對回復(fù) 2018-08-19