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

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

1 个答案: