css - 具有尖头的矩形，悬停时会改变颜色

Question

除了一件事，我在这个网站上找到了一个符合我需要的例子。如果我添加悬停，左右三 Angular 形将具有相同的颜色，而不是新的悬停颜色。知道当我们将鼠标悬停在矩形上时如何产生黑色三 Angular 形吗？

.yourButton {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:blue;
    text-align:center;
    line-height:40px;
}
.yourButton:hover {background-color:black}
.yourButton:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid blue;
    border-bottom:20px solid transparent;
}

.yourButton:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid blue;
    border-bottom:20px solid transparent;
}

<div class="yourButton">You wanted this?</div>

Answer 1

您需要为 :after 和 :before 制作 2 个不同的悬停类并更改边框颜色。

.yourButton {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:blue;
    text-align:center;
    line-height:40px;
}
.yourButton:hover {background-color:black}
.yourButton:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid blue;
    border-bottom:20px solid transparent;
}

.yourButton:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid blue;
    border-bottom:20px solid transparent;
}


.yourButton:hover:after{
   border-left:40px solid #000;
}
.yourButton:hover:before{
  border-right:40px solid #000;
}

<div class="yourButton">You wanted this?</div>