带有尖端的矩形，可在悬停时改变颜色

Question

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

.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个不同的悬停类，并更改边框颜色。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;