Hover.css Library Animations not working in Firefox or Edge, but works in chrome?
Question
For some odd reason, an answer I cannot find, is why this library does not working in Firefox or Edge?!?! I add an underline animation to a navbar tab and nothing happens except for the text that is suppose to turn red.
Below is the code for my index.html file.
<!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>
Below is my code for my 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;
}
2 answers
solution1
0 2016-09-21 05:40:23
Please check your css source file path is right or not. if any every things is good please send me zip i will fix
solution2
0 ACCPTED 2016-09-23 12:24:03
Instead of .hvr-underline-from-center in the CSS, explicitly say li..hvr-underline-from-center .
Full Example:
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;
}
For some reason, Firefox requires elements to be called out in CSS explicitly. This should work with edge and Firefox now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS shadow works in IE/Edge not in Chrome or Firefox
JavaScript not working in Firefox, Chrome - works in IE, Edge
CSS text wiggle animation no longer works on Chrome/Firefox but works on Edge
:hover works in Chrome but not Firefox
CSS not working with IE and Firefox, but works in Chrome
Element.scrollIntoView(); Not working in Chrome and Edge, Works in Firefox?
Why are my animate.css animations working in Chrome but not in Firefox?
CSS SVG animations are not working in edge
CSS not working in IE or Firefox - Chrome works fine
css3 animation not working in firefox but works in chrome
Related Tags