0
이상한 이유로, 내가 찾을 수없는 대답은 Firefox 또는 Edge에서이 라이브러리가 작동하지 않는 이유입니다. navbar 탭에 밑줄 애니메이션을 추가하면 빨간색으로 바뀌는 텍스트를 제외하고는 아무 것도 발생하지 않습니다.Hover.css Library 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;
}
아직 작동하지 않습니다 ... – Noah
어떻게하면 우편을받을 수 있습니까? – Noah
아직도 Firefox에서 작동하지 않습니다 – Noah