Question

我正在尝试为商店制作网站，而我正在使用Bootstrap导航栏。这就是我希望导航栏运行的方式：当用户点击“关于”时，下拉菜单变为可见，然后用户可以单击其中一个子菜单类别。在悬停，聚焦或点击之后，比如说，“商店营业时间”子类别，我希望“存储时间”改变背景颜色，然后整个菜单折叠/关闭。在我的Mac上一切都很完美，但在移动设备上有一件事情不同：点击“营业时间”后，菜单立即崩溃，而用户看不到“营业时间”的背景颜色会先改变。当我在我的计算机上调整窗口大小时，它的功能应该是它应该的，但在移动设备上我还不确定会发生什么......

以下是为了简单起见而仅显示导航栏的网站：http://nikmash.com。如果你在移动设备上看到它，你肯定会看到我想要解释的内容。

如果有人奇迹般地知道这里发生了什么并有建议，我真的很感激！

这是我的HTML：

<!DOCTYPE html>
<html>
   <head>
      <title>Discount Luggage of Hollywood</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Arvo:700,400" rel="stylesheet">
      <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> 
      <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <!-- we need jquery because JS uses it -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script type="text/javascript">


        $(document).click(function (event) {
        var clickover = $(event.target);
        var $navbar = $(".navbar-collapse");               
        var _opened = $navbar.hasClass("in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
            $navbar.collapse('hide');
        }
        });

      </script> 
   </head>
   <body>
          <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               </button>
               <a href="#" class="navbar-brand">Business</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-nav-demo">
               <ul class="nav navbar-nav">
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-suitcase"></i> About <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li class = "diff"><a href="#"> <i class="far fa-clock"></i> Store Hours</a></li>
                        <li role="separator" class="divider"></li>
                        <li class = "diff"><a href="#"><i class="fas fa-map-marker-alt"></i> Location & Directions</a></li>
                        <li role="separator" class="divider"></li>
                        <li class = "diff"><a href="#"><i class="fas fa-car"></i> Parking</a></li>            
                     </ul>
                  </li>
                  <li><a href="#"><i class="fas fa-edit"></i> Reviews</a></li>
               </ul>
            </div>
         </div>
      </nav>

   </body>
</html>

和CSS：

body{
padding-top: 70px;
text-align: center;
height: 100%;
}

html{
height:100%;
}

.navbar-brand{
position: absolute;
transform: translateX(-50%);
left: 50%;
text-align: center;
}

.navbar-toggle {
z-index:3;
background-color: white;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: black;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background-color:#9da6b5;
}

.navbar{
background-color: rgba(1, 1, 1, .9);
border:none;
}

.navbar-default .navbar-nav>li>a{
transition: background-color .3s;
color: #9da6b5;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
background-color: white;
}

.navbar-nav .open .dropdown-menu{
background-color: rgba(1, 1, 1, .9);
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color:#9da6b5;
}

.navbar-default .navbar-brand{
transition: color .5s;
color: white;
}

.dropdown-menu>li>a{
transition: background-color .3s;
color:#9da6b5;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
background-color: white;

}

@media (max-width: 767px){

.navbar-nav .open .dropdown-menu{
  background-color: rgba(60, 63, 68,.5)
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a{
color: #9da6b5;
text-align: center;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:active{
background-color: white;
}

}

@media(max-width: 576px){
.navbar-brand{
transform: translateX(0);
left:0;
right: 0;
text-align: right;
left:10%;
}
}

@media (max-width: 321px){
.navbar-brand{
font-size: 15px;
}
}

Answer 1

：触摸屏设备上不存在悬停行为。在iOS上：在点击事件之前触发悬停，因此您会在页面前看到悬停样式一小段时间变化。

了解更多info

移动设备上的Bootstrap 3导航栏 - 没有看到所需的悬停效果

1 个答案: