I want hover animation to be played only during non-selected nav links

Question

Here's a link to my codepen: http://codepen.io/Chiz/pen/LpRQeY

Here's the embeded code:

.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>

Hover over the 4 links on the right. Everything works fine, except for 1 issue. The link that is selected (the "Me" link") should NOT have the hover effect applied to it. The hover effect should be applied only onto non-selected nav links.

I think the problem is that "@-webkit-keyframes" section. It's being applied globally through the site. I tried putting it inside the ".navbar-default .navbar-nav > li > a:hover" section but obviously, it's invalid syntax.

Tks!

Nope, problem is on Codepen and on my browser preview as well. — Xeon, Sep 24 '15 at 11:04
@Xeon consider selecting an answer as best answer whichever you find best, if none solved your problem then feel free to elaborate your problem in detail.. — Rohit Kumar, Sep 27 '15 at 13:16

score 1 · Answer 1 · answered Sep 24 '15 at 11:04

You've got several solutions here. Either use !important rule like this (on the very first css rule you've defined) -

.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 */
}

Another solution will be to cut and paste the above code in the last of your css. And in this case you won't need the !important rule.

See the codepen.

score 1 · Answer 2 · answered Sep 24 '15 at 11:07

1

Add the following code to override the animation of active link:

.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus
{
    -webkit-animation-name:none

}

answered Sep 24 '15 at 11:07

LouYu

671
1
6
14

Rahul Kumar · Answer 3 · 2015-09-24T11:32:15.523

Just add the following line in CSS and then check it.

.navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus{ -webkit-animation-name:none; background:none; color:#fff;}

Do let me know if you have any issue.

.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; }

.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus{ -webkit-animation-name:none; background:none; color:#fff;}

<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>
<div class="container-fluid">
  <div class="row"> </div>
</div>

I want hover animation to be played only during non-selected nav links

3 Answers3