html - 我希望仅在未选择的导航链接期间播放悬停动画

Question

这是我的代码笔的链接:http://codepen.io/Chiz/pen/LpRQeY

这是嵌入代码:

.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > .active,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:link,
.navbar-default .navbar-nav > .active > a:visited,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: white;
  background-color: rgba(74, 74, 74, 1.00);
}
@-webkit-keyframes greenPulse {
  from {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #91bd09;
    -webkit-box-shadow: 0 0 18px #91bd09;
  }
  to {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 9px #333;
  }
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(230, 230, 230, 1.00);
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}
/* make width of all nav link boxes the same */

.nav li {
  float: left;
  width: 10em;
}
.nav li a:link {
  display: block;
  width: 100%;
  text-align: center;
}
/* arrow pointer for selected nav bar tab by using CSS triangle trick */

.navbar-default .navbar-nav > li.active {
  position: relative;
}
.navbar-default .navbar-nav > li.active:after {
  /* http://stackoverflow.com/questions/7073484/how-do-css-triangles-work */
  border-color: transparent transparent rgba(74, 74, 74, 1.00) transparent;
  border-style: solid;
  border-width: 15px 15px 30px 15px;
  content: "";
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 0;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">MySiteLogo</a>
			</div>
            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#" data-toggle="tab">Me</a></li>
                    <li><a href="#" data-toggle="tab">Web</a></li>
                    <li><a href="#" data-toggle="tab">Print</a></li> 
                    <li><a href="#" data-toggle="tab">Art / 3D</a></li> 
                </ul>
            </div>
        </div>
</nav>

将鼠标悬停在右侧的 4 个链接上。一切正常，除了 1 个问题。 选定的链接(“我”链接)不应应用悬停效果。悬停效果应仅应用于未选定的导航链接。

我认为问题出在“@-webkit-keyframes”部分。它正在通过该站点在全局范围内应用。我尝试将它放在“.navbar-default .navbar-nav > li > a:hover”部分，但显然，它是无效语法。

谢谢!

Answer 1

这里有几个解决方案。要么像这样使用 !important 规则(在您定义的第一个 css 规则上)-

.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > .active,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:link,
.navbar-default .navbar-nav > .active > a:visited,
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus
{
    color:white !important;
    background-color:rgba(74,74,74,1.00) !important;
    box-shadow: none !important; /* see I've added box shadow also */
}

另一种解决方案是将上述代码剪切并粘贴到您的 css 的最后。在这种情况下，您将不需要 !important 规则。

参见 codepen .