除了一件事,我在这个网站上找到了一个符合我需要的例子。如果我添加悬停,左右三 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>
最佳答案
您需要为 :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>
关于css - 具有尖头的矩形,悬停时会改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33164302/