防止文本声纳效果动画制作动画

Question

见我codepen：http://codepen.io/Chiz/pen/YypzYx

将鼠标悬停在灰色方块和声纳效果动画出来。 一切都很好，但是，有没有办法阻止文本（本例中为“单击”）与声纳效果一起动画？我希望文字留在那里。

下面的代码为方便：

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

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

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

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

韩国社交协会！

Answer 1

只是移动<a>元素外格：

<div class="sonar-wrapper"> 
    <div class="square"> 
    <div></div> 
    <a href="#">Click</a> 
    </div> 
</div> 

Demo。在这种情况下，锚元素将保持未转换状态。