已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問 jquery中如何讓對應順序的ul...

jquery中如何讓對應順序的ul懸停顯示對應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">內容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();});})

查看完整描述

1 回答

呼喚遠方

TA貢獻1856條經驗獲得超11個贊

你期望的效果：

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

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

反對回復 2018-08-19

1 回答
0 關注
1321 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答

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

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