html - 为 Hover 修改 Dropdown-Toggle

Question

我正在尝试修改 Moderna网站模板。如果您查看标题中的链接并单击 Features，您将看到一个下拉菜单。

我想做的是改变它，让这个菜单出现在 hover 而不是 click 上，但我似乎无法让它工作。

这些是我正在改变的......

HTML

<div class="navbar-collapse collapse ">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li class="dropdown active">
            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>
            <ul class="dropdown-menu">
                <li><a href="typography.html">Typography</a></li>
                <li><a href="components.html">Components</a></li>
                <li><a href="pricingbox.html">Pricing box</a></li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS

header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

我尝试将 class="dropdown-toggle" 更改为

• class="dropdown-toggle:hover"
• class="hover"
• class="dropdown-toggle hover"

并且我尝试将 data-toggle="dropdown" 更改为

• data-toggle="dropdown hover"
• data-toggle="hover"
• data-toggle="dropdown-toggle:hover"

但无济于事。但是，我做错了什么，我的知识(清楚地)不足以弄清楚。

Answer 1

我相信您不需要通过 css 而是通过 javascript 管理然后更改类名的行为。在本例中，捕获并处理单击事件以显示菜单。