歪斜的按钮在正确悬停时不会改变文本颜色

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