Question

请参阅我的codepen：http://codepen.io/Chiz/pen/YypzYx

将鼠标悬停在灰色方块上，声纳效果动画出现。一切都很好，但有没有办法防止文本（＆＃34;点击＆＃34;，在这种情况下），与声纳效果一起动画？我希望文本留在那里。

以下是方便的代码：

＆＃13;

$(".square").on("mouseover", function() {
  $(this).children().first().addClass("square-inner");
});

$(".square").on("mouseleave", function() {
  $(this).children().first().removeClass("square-inner");
});

＆＃13;

/* Prevent scrollbars to appear when waves go out of bound */

.sonar-wrapper {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.square {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgb(200, 200, 200);
  margin: 5rem auto;
}
.square-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: HSL(45, 100%, 50%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: sonarWave 2s linear infinite;
}
@keyframes sonarWave {
  from {
    opacity: 0.4;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}
div {
  text-decoration: none;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sonar-wrapper">
  <div class="square">
    <div><a href="#">Click</a>
    </div>
  </div>
</div>

＆＃13;

韩国社交协会！

Answer 1

将FileSize元素移到div：

之外

<a>

Demo。在这种情况下，锚元素将保持不变形。

防止文本在声纳效果动画中设置动画

1 个答案: