2016-09-21 320 views
0

由於一些奇怪的原因,我無法找到的答案是爲什麼這個庫不能在Firefox或Edge中工作?!?!我將下劃線動畫添加到導航欄選項卡,除了假設變成紅色的文本以外什麼也沒有發生。Hover.css庫動畫在Firefox或Edge中不起作用,但在Chrome中起作用?

下面是我的index.html文件的代碼。

<!DOCTYPE html> 

<html lang = "en"> 

<head> 

<title>Klassic</title>  

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

<meta charset="UTF-8">  

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 

<link rel="stylesheet" href="style.css" type ="text/css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<link href="https://fonts.googleapis.com/css?family=Armata" rel="stylesheet"> 

<link href = "animate.css" rel="stylesheet"> 

<link href = "hover.css/hover.css" rel="stylesheet" media="all"> 

<link href = "hover.css/hover-min.css" rel="stylesheet" media="all">  

</head> 

<body> 

<nav class="navbar navbar-default container navbar-centered" role="navigation"> 

<div class="navbar-header"> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

     <span class="sr-only">Toggle navigation</span> 

      <span class="icon-bar"></span> 

      <span class="icon-bar"></span> 

      <span class="icon-bar"></span> 


    </button>  

</div> 

<div class="navbar-collapse collapse"> 

    <ul class="nav navbar-nav"> 

     <li class = "hvr-underline-from-center navbar-button-font"><a href="#">Home</a></li> 

     <li class = "navbar-button-font hvr-underline-from-center"><a href="#">Schedule</a></li> 

     <li class = "navbar-button-font hvr-underline-from-center"><a href="#">Teams</a></li> 

     <li class = "navbar-button-font hvr-underline-from-center"><a href="#">Sponsors</a></li> 

     <li class = "navbar-button-font hvr-underline-from-center"><a href="#">Results</a></li> 

     <li class = "navbar-button-font hvr-underline-from-center"><a href="#">Contact</a></li> 

    </ul> 

    <script type = "text/javascript"> 

       $(document).on('click','.navbar-collapse.in',function(e) { 

       if($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') { 

       $(this).collapse('hide'); 
      } 
     }); 


     </script> 

     <script type = "text/javascript"> 

       $('ul.nav [data-toggle=dropdown').on({ 

       mouseenter: function(event) { 

       if (!$(this).hasClass("open")) { 

       $(this).parent().toggleClass('open'); 

       } 
      } 
     }); 

     </script> 

     <script type = "text/javascript"> 

       $('ul.nav .dropdown, .dropdown-submenu').on({ 

       mouseleave: function(event) { 

       if ($(this).hasClass("open")) { 

       $(this).toggleClass('open'); 

       } 
      } 
     }); 

    </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("navbartoggle")) {  

       $navbar.collapse('hide'); 
      } 
     }); 

     </script> 



     </nav> 

     </body> 


     </html> 

下面是我的代碼爲我的style.css

.navbar { 

margin-top: 30px; 
border-color: red; 

} 

.navbar-toggle { 


position: relative; 
float: left; 
padding: 20px 20px; 
margin-top: 8px; 
margin-right: -20px; 
margin-left: 21px; 
margin-bottom: 8px; 
background-color: transparent; 
background-image: none; 
border-color: black; 
border-radius: 4px; 
text-align: center; 
z-index: 3; 


} 

@media (min-width: 768px) { 
.navbar-centered .navbar-nav { 
    float: none; 
    text-align: center; 

} 
.navbar-centered .navbar-nav > li { 
    float: none; 
} 
.navbar-centered .nav > li { 
    display: inline; 
    padding-bottom: 17px; 
    padding-top: 19px; 
    padding-right: 10px; 
    padding-left: 10px; 

} 
.navbar-centered .nav > li > a { 
    display: inline-block; 
} 
} 

/* Makes Navbar activate collapse earlier */ 

@media (max-width: 768px) { 
.navbar-collapse.collapse { 
    display: none !important; 
    overflow: hidden; 
} 
.navbar-collapse.collapse.in { 
    display: block !important; 
} 
.navbar-header .collapse, .navbar-toggle { 
    display:inline; !important; 
} 
.navbar-header { 
    float:none; 
    background-color: transparent; 
} 

.navbar { 

background: transparent; 

border-color: transparent 

} 

.collapse { 

background-color: white; !important; 


} 

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 

border-color: white; 

}

.navbar-toggle { 

    margin-top: -19px 


}  

} 

.navbar-button-font { 


font-family: 'Armata', sans-serif; 


} 


.navbar-default .navbar-nav>li>a:hover { 

color: red; 
} 

body { 



} 

.active { 


background-color: transparent; 


} 

.hvr-underline-from-center { 
display: inline-block; 
vertical-align: middle; 
-webkit-transform: translateZ(0); 
transform: translateZ(0); 
box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
-moz-osx-font-smoothing: grayscale; 
position: relative; 
overflow: hidden; 
} 
.hvr-underline-from-center:before { 
    content: ""; 
position: absolute; 
z-index: -1; 
left: 50%; 
right: 50%; 
bottom: 0; 
background: red; 
height: 4px; 
-webkit-transition-property: left, right; 
transition-property: left, right; 
-webkit-transition-duration: 0.3s; 
transition-duration: 0.3s; 
-webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-underline-from-center:hover:before,  .hvr-underline-from-  

    center:focus:before,  .hvr-underline-from-center:active:before { 
    left: 0; 
    right: 0; 
    } 

回答

0

而不是在CSS中的.hvr-underline-from-center,明確地說是li..hvr-underline-from-center

完整的例子:

li.hvr-underline-from-center { 
display: inline-block; 
vertical-align: middle; 
-webkit-transform: translateZ(0); 
transform: translateZ(0); 
box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
-webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
-moz-osx-font-smoothing: grayscale; 
position: relative; 
overflow: hidden; 
} 
li.hvr-underline-from-center:before  { 
content: ""; 
position: absolute; 
z-index: -1; 
left: 50%; 
right: 50%; 
bottom: 0; 
background: red; 
height: 4px; 
-webkit-transition-property: left, right; 
transition-property: left, right; 
    -webkit-transition-duration: 0.3s; 
transition-duration: 0.3s; 
-webkit-transition-timing-function; ease-out; 
    transition-timing-function: ease-out; 
} 
li.hvr-underline-from-center:hover:before, li.hvr-underline-from-center:focus:before, li.hvr-underline-from-center:active:before { 
    left: 0; 
    right: 0; 
    } 

出於某種原因,Firefox的要求元素被CSS中明確地叫了一聲。這應該現在與邊緣和Firefox一起工作。

0

請檢查你的CSS源文件路徑正確與否。如果任何東西都不錯,請發給我zip我會修復

+0

仍然無法正常工作... – Noah

+0

我該如何獲得郵編給你? – Noah

+0

至少在Firefox中不起作用 – Noah

相關問題