Question

请查看此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>

当我将鼠标悬停在图片上方时，图片确实会被替换，下拉菜单会向下滑动，但是，我只是无法将鼠标悬停在下拉列表项目上，因为下拉菜单会立即向上滑动。

Answer 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。因此，在包装器上应用悬停事件。如果这个包装器不合适，请创建一个包装器来包装菜单及其图像，并对其应用悬停效果。

CSS下拉菜单的奇怪行为

1 个答案: