CSS下拉菜单的奇怪行为答案

【问题标题】：Weird behaviour of CSS Dropdown menuCSS下拉菜单的奇怪行为
【发布时间】：2013-09-26 04:00:52
【问题描述】：

请看一下这个link。通过将鼠标悬停在“菜单”上，将显示下拉菜单并暂停。现在我尝试将菜单更改为TD 元素并将图像分配给此TD 元素，当将鼠标悬停在此图像上时，它将更改图像并显示下拉菜单。请参考以下代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
li.li_class{
    display: block;
}

ul.dropDown{
    margin:0px;
    padding:0px;
}
#clickable_div {width:166px; background-color:#9c9c9c;display:block;}

#nav_menu{width:166px; height:auto; background-color:#CCC;z-index: 99999; display: none;position: absolute;}

#wrap{ width:166px;}
</style>
</head>

<body>
    <table>
        <tr>
            <td><img src="images/ori_12.png">
            </td>
            <td id='testable'>
                <div id='wrap'>
                    <img src="images/ori_14.png">
                    <div id="nav_menu">
                        <ul class="dropDown">
                            <li class="li_class"><img src="images/ori_12.png"></li>
                            <li class="li_class"><img src="images/ori_14.png"></li>
                            <li class="li_class"><img src="images/ori_15.png"></li>
                            <li class="li_class"><img src="images/ori_16.png"></li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                abc
            </td>
            <td>
                def
            </td>
        </tr>
    </table>

</body>
<script>
        $('#testable img')
        .mouseenter(function () {
            this.src = this.src.replace('/ori_', '/hover_');
            $('#nav_menu').stop(true, true).slideDown();
        })
        .mouseleave(function () {
            this.src = this.src.replace('/hover_', '/ori_');
            $('#nav_menu').stop(true, true).slideUp();
        });



        $('#nav_menu li img')
        .mouseover(function () {
            this.src = this.src.replace('/ori_', '/hover_');
        })
        .mouseout(function () {
            this.src = this.src.replace('/hover_', '/ori_');
        });

    </script>
</html>

当我将鼠标悬停在图像上时，图像确实被替换并且下拉菜单确实向下滑动，但是，当下拉菜单立即向上滑动时，我无法将鼠标悬停在下拉列表项上。

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

试试

 $('#testable  #wrap').mouseenter(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/ori_', '/hover_');
     $('#nav_menu').stop(true, true).slideDown();
 }).mouseleave(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/hover_', '/ori_');
     $('#nav_menu').stop(true, true).slideUp();
 });

Fiddle

当您将鼠标悬停在图像之外以悬停在菜单中时会触发mouseout。因此，在包装器上应用悬停事件。如果此包装器不合适，请创建一个包装器来包装菜单及其图像并对其应用悬停效果。

【讨论】：

再次感谢您的帮助。现在slideDown的下拉很顺利，但是li元素中的每一个都没有hover改变图片效果
太棒了！你又一次救了我一天！非常感谢！