Question

我有一个下拉菜单（我修正了位置）和display: none;，而不是我只是将显示更改为阻止。我有这个：

的JavaScript

$('.dropdownmenu').hover(function () {
        console.log("hovered");
    },
    function () {
        console.log("out");
    }
);

HTML

<div class="dropdownmenu" style="display: none;">
    <div id="dropdownmenuheader">
        <ul class="dropdownmenulist">
            <li>
                <div class="dbordermenulist"><a href="/blah">Web design & development</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Web hosting</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Branding</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Digital Marketing</a>
                </div>
            </li>
            <li style="border-bottom: 0;">
                <div class="dbordermenulist" style="border-bottom: 0;"><a href="/blah">Software Development</a>
                </div>
            </li>
        </ul>
    </div>
    <div id="dropdowngradient"></div>
</div>

但是mouseenter，mouseleave或hover似乎不起作用，我试图创造一种效果，当有人在它上面盘旋时它会保持可见但是当鼠标离开2秒时它会消失。（我知道我需要使用计时器，但我无法触发.hover。

Answer 1

由于这可能无法解答您的初始问题，我问自己，为什么您不将CSS用于此用例？

这是一个例子：http://jsfiddle.net/NicoO/R9NNx/1/

更新了CSS过渡示例和悬停延迟：http://jsfiddle.net/NicoO/R9NNx/10/

ul.dropdownmenulist {
    list-style: none;
    margin:0;
    padding:0;
}
ul.dropdownmenulist > li {
    float: left;
    margin: 5px;
    position: relative;
}
ul.dropdownmenulist > li > ul {
    display: none;
    position: absolute;
    background-color: lightgray;
    box-shadow: rgba(0,0,0,0.3) 2px 2px 2px;
}

ul.dropdownmenulist > li:hover > ul {
    display: block;
}

使用这样的HTML：

<ul class="dropdownmenulist">
    <li><a href="#">What we do</a>

        <ul>
            <li> <a href="/blah">Web design & development</a>

            </li>
            <li> <a href="/blah">Web hosting</a>

            </li>
            <li> <a href="/blah">Branding</a>

            </li>
            <li> <a href="/blah">Digital Marketing</a>

            </li>
            <li>
<a href="/blah">Software Development</a>

            </li>
        </ul>
    </li>

    <li><a href="#">What we do</a>

        <ul>
            <li> <a href="/blah">Web design & development</a>

            </li>
            <li> <a href="/blah">Web hosting</a>

            </li>
            <li> <a href="/blah">Branding</a>

            </li>
            <li> <a href="/blah">Digital Marketing</a>

            </li>
            <li>
<a href="/blah">Software Development</a>

            </li>
        </ul>
    </li>
</ul>

下拉菜单（带图片和UL LI列表）

1 个答案: