jq實例導航欄滑動思路

1.希望鼠標滑動到翡翠這一塊不消失？該怎么寫，想了很久沒思路。
圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,
            li {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .clearfix:after {
                content: '';
                display: block;
                clear: both;
            }
            
            #warp .list {
                width: 200px;
                cursor: pointer;
                height: 50px;
                background-color: #c7171f;
                color: #fff;
                font-size: 15px;
                line-height: 50px;
                padding-left: 30px;
                position: relative;
            }
            
            #warp .list div {
                float: left;
            }
            
            #warp .list>span {
                float: right;
                margin-right: 30px;
            }
            
            #warp .list .listdata {
                position: absolute;
                top: 0;
                left: 100%;
                color: black;
                border: 1px solid #ccc;
                display: none;
            }
            
            #warp .list .show {
                display: block;
            }
            
            #warp .list .listdata li {
                width: 200px;
                font-size: 12px;
            }
            
            #warp .list .listdata li span {
                margin-right: 30px;
            }
        </style>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <ul id="warp">
            <li class="list clearfix">
                <div class="jewelry">珠寶玉器</div>
                <span>></span>
                <ul class="listdata">
                    <li>
                        <span>翡翠</span>
                        <span>玉石</span>
                    </li>
                    <li>
                        <span>翡翠</span>
                        <span>玉石</span>
                    </li>
                    <li>
                        <span>翡翠</span>
                        <span>玉石</span>
                    </li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            var $ol = $('#warp  li');
            var $ul = $('#warp ul');
            var index;
            $ol.on('mouseover', function(event) {
                console.log($(this).index())
                $(event.target).find('.listdata').attr('class', function() {
                    return $(this).attr('class') + ' show';
                });

            });
            $ol.on('mouseout', function(event) {

                $(event.target).find('.listdata').removeClass('show');

            });
        </script>
    </body>

</html>

回答

編輯回答

還吻

css:

.jewelry:hover ~ .listdata {
    display: block;
}
.listdata:hover {
    display: block;
}

2018年5月10日 17:24

編輯回答

尐潴豬

看這么久沒人回答……我給你提供個思路吧，不過我自己也沒實現(xiàn)過。思路就是顯示#warp的第二層li通過監(jiān)聽#warp的第一層li的mouseover來顯示，隱藏通過監(jiān)聽整個#warp的mouseout來隱藏。不知道這是不是你需要的效果。

2018年5月19日 13:49

編輯回答

夢若殤

  var $outerUL = $('#warp');
  $outerUL.on('mouseover', '.list', function(event) {
    $(this).find('.listdata').addClass('show');
  });
  $outerUL.on('mouseout', '.list', function(event) {
    $(this).find('.listdata').removeClass('show');
  });

2017年4月4日 18:38