傾斜的按鈕無法正確更改懸停時的文本顏色

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