歪斜的按鈕在正確懸停時不會改變文本顏色

Question

所以我得到了這種過渡效果，並且一切正常，但是當光標位於此按鈕的邊緣時（當我將鼠標懸停在傾斜邊緣上時），按鈕不會更改文本顏色變白。只有當我靠近中間時，它才能很好地工作。有沒有辦法解決這個問題，我在這裏錯過了什麼..？謝謝。

這裏的codepen：http://codepen.io/anon/pen/dvPJvx

.skew-button { 
     border: 1px solid red; 
    border-radius: 3px; 
    background: #FFF; 
    transform: skew(-20deg); 
} 

.skew-button a { 
    position: relative; 
    display:block; 
    text-decoration:none; 
    z-index: 10; 
    transform: skew(20deg); 
    color: black; 
    font-size: 1rem; 
    font-weight: 600; 
    font-family: 'Raleway', sans-serif; 
    padding: 10px 12px; 
    text-transform: uppercase; 
    transition: all .2s linear; 
} 

.skew-button a:hover { 
    color: #FFF; 
    cursor: pointer; 
} 

.skew-button:after { 
    content:""; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 0; 
    color: #fff; 
    height: 100%; 
    background: red; 
    opacity: 0; 
    transition: all .2s linear; 
} 

.skew-button:hover:after { 
    width: 100%; 
    opacity: 1; 
} 

<button class="skew-button"> 
    <a href="#">Button</a> 
</button> 

Answer 1

更改行23：

.skew-button:hover a