草庐IT

javascript - CSS 下拉菜单 : Add delay on mouse out

coder 2024-07-19 原文

我在下面使用 CSS 和 HTML 制作了下拉菜单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Main Menu</title>
    <style>
    .menu
    {
        float:left;
        background:#CCC;
        margin:0px;
        padding:0px;
    }

    .menu  li
    {
        position:relative;
        float:left;
        width:180px;
        padding: 5px 0px;
        list-style: none;
    }

    .menu li:hover
    {
        background:#999;
    }

    .menu ul
    {       
        display:none;
        position:absolute;
        background:#CCC;
        padding:0;
        margin:5px 0 0 0;
    }

    .menu ul li ul
    {
        left:100%;
        top:0;
        margin:0px;
    }

    .menu li:hover ul ul, .menu li:hover ul ul ul
    {
        display: none;
    }

    .menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul
    {
        display: block;
    }   
    </style>
</head>
<body>
    <ul class="menu">
        <li>Home</li>
        <li>
            Categories
            <ul>
                <li>Lorem Ipsum</li>
                <li>Dolor Sit Amet</li>
                <li>Consectetuer</li>
                <li>
                    Adipiscing
                    <ul>
                        <li>Child Elit Set Diam Nonummy</li>
                        <li>
                            Child Suspendisse sed
                            <ul>
                                <li>Grand Child Nulla dolor dui</li>
                                <li>Grand Child Venenatis feugiat</li>
                                <li>Grand Child Morbi ac lectus</li>
                                <li>Grand Child Nulla dolor dui</li>
                                <li>Grand Child Venenatis feugiat</li>
                                <li>Grand Child Morbi ac lectus</li>
                            </ul>
                        </li>
                        <li>Child Nulla dolor dui</li>
                        <li>Child Venenatis feugiat</li>
                        <li>Child Morbi ac lectus</li>
                    </ul>
                </li>
                <li>Elit Set Diam Nonummy</li>
                <li>Suspendisse sed</li>
                <li>
                    Nulla dolor dui
                    <ul>
                        <li>Child Elit Set Diam Nonummy</li>
                        <li>Child Suspendisse sed</li>
                        <li>Child Nulla dolor dui</li>
                        <li>Child Venenatis feugiat</li>
                        <li>Child Morbi ac lectus</li>
                    </ul>
                </li>
                <li>Venenatis feugiat</li>
                <li>Morbi ac lectus</li>
                <li>pharetra</li>
            </ul>
        </li>
        <li>Order</li>
        <li>Payment</li>
        <li>Contact</li>
    </ul>
</body>
</html>

JSBIN:
http://jsbin.com/anojif

我想在此下拉菜单中添加延迟，因此当鼠标移出时，子菜单仍会出现几秒钟。我在那里尝试了一些教程，但它太困惑了。

出于某种原因，我不想使用任何 jquery 下拉菜单。你能帮助我如何使用 javascript 实现这一点吗？

已解决:http://jsbin.com/otapex/2

最佳答案

将所有 :hover 更改为一个类(例如“.hover”)。添加 mouseover/mouseout 事件以在 setTimeout 中添加“悬停”类。 setTimeout 应该检查用户是否仍在元素上悬停。

关于javascript - CSS 下拉菜单 : Add delay on mouse out，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8422123/

javascriptdelayltgtlicssdrop-down-menu

有关javascript - CSS 下拉菜单 : Add delay on mouse out的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  8. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

随机推荐