Question

Here's my codepen: http://codepen.io/Chiz/pen/MabomR

将鼠标悬停在3个未选定的链接（网页，打印，艺术/ 3D等）上，让光标停留在链接上。

动画效果本身还可以，但我不希望文本与框一起动画。这意味着，当声纳动画正在发生时，我希望文本完好无损，并且不能用框进行动画处理。

有没有办法解决这个问题？显然，我无法移动li之外的人。为方便起见，这是代码：

＆＃13;

$(".nav li").on("mouseover", function() {
  if ($(this).hasClass("active") == false) {
    $(this).children().first().addClass("sonar");
  }
});

$(".nav li").on("mouseleave", function() {
  $(this).children().first().removeClass("sonar");
});

＆＃13;

.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);
}
.sonar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(216, 216, 216, 1.00);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: sonarWave 1s linear infinite;
}
@keyframes sonarWave {
  from {
    opacity: 0.5;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

＆＃13;

<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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>

＆＃13;

Answer 1

您可以更改声纳类以设置:after伪元素的动画。请确保为其添加content:''：

.sonar:after
{
   content:'';
   ...
}

http://codepen.io/anon/pen/QjGgqJ

阻止动画应用于<a> inside </a> <li> <a>

1 个答案: