防止文本聲納效果動畫製作動畫

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。在這種情況下，錨元素將保持未轉換狀態。