Question

我有这个测试页：http://www.problemio.com/index_new.php

我试图为悬停功能制作一些jQuery。但我不确定如何去做。有一些像这样的jQuery代码：

$('ul#environment li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

$('ul#health li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

页面上的

和HTML如下：

        <div style="display:none;">
            <ul id="environment" >
                <li>Green Lifestyle</li>
                <li>Energy Use</li>
            </ul>
            <ul id="health">
                <li>Medicine</li>
                <li>Diet</li>
            </ul>
        </div>

然后我有一些HTML链接，我想在用户鼠标悬停时显示相应的悬停效果。

我该怎么做？我似乎有各自的功能，但不知道如何让它们一起玩。

Answer 1

您不能将鼠标悬停在未显示的内容上。

<div style="display: none;">

因为您有display: none;，所以您的菜单不可见/不可用。删除它，然后你可以从那里开始工作。

如何正确地使jQuery悬停工作

1 个答案: