将鼠标悬停在导航栏中的单个按钮上

hover on single button in navbar

本文关键字：单个 按钮 鼠标 悬停 导航      更新时间：2023-09-26

此javascript用于以下页面的导航栏

当你将"blog"悬停在导航栏上时，会出现一个白色背景的下拉菜单。按钮"测试"不应该是一个下拉，但我想blog按钮相同的功能。所以当你将鼠标悬停在"test"按钮上时，应该会出现同样的白色背景。目前，文字只是变成了蓝色。

有谁知道我该怎么做吗?

//Show dropdown on hover only for desktop devices
        //-----------------------------------------------
        var delay=0, setTimeoutConst;
        if ((Modernizr.mq('only all and (min-width: 768px)') && !Modernizr.touch) || $("html.ie8").length>0) {
            $('.main-navigation:not(.onclick) .navbar-nav>li.dropdown, .main-navigation:not(.onclick) li.dropdown>ul>li.dropdown').hover(
            function(){
                var $this = $(this);
                setTimeoutConst = setTimeout(function(){
                    $this.addClass('open').slideDown();
                    $this.find('.dropdown-toggle').addClass('disabled');
                }, delay);
            },  function(){
                clearTimeout(setTimeoutConst );
                $(this).removeClass('open');
                $(this).find('.dropdown-toggle').removeClass('disabled');
            });
        };

这可以通过下面的CSS声明来完成:

ul.nav.navbar-nav li:hover{
  background: white;
  }

:hover是一个伪类，用于检测元素上的鼠标。你可以在这里了解更多关于hover伪类的信息:Mozilla Developer Network CSS Docs

相关文章：