移动鼠标后,三角形中的颜色不会改变。怎么改呢?我正在尝试这样做,但我不能这样做。
https://jsfiddle.net/m59azhn8/3/
<button type="submit">Turn to the dark side</button>
CSS:
* {
text-align: center;
margin: 0;
padding: 0;
}
button[type=submit] {
padding: 20px 30px;
background-color:black;
border: 0;
position: relative;
color: #ffe200;
font-size: 22px;
}
button[type=submit]:after {
content: '';
border-width: 23px;
border-color: transparent black black transparent;
border-style: solid;
position: absolute;
top: 9.5px;
left: 228px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
button[type=submit]:hover {
color: black;
background-color: #ffe200;
border-color: transparent #ffe200 #ffe200 transparent;
}
答案 0 :(得分:0)
您需要添加一些css
行
button[type=submit]:hover:after {
border-color: #ffe200;
z-index: -1; // You can change or remove this
}
工作小提琴here
答案 1 :(得分:0)
查看更新的小提琴https://jsfiddle.net/m59azhn8/8/
刚添加以下内容
button[type=submit]:hover::after {
border-color: #ffe200;
}
多数民众赞成!
答案 2 :(得分:0)
您可以将以下内容添加到CSS样式中。
button[type=submit]:hover:after {
border-color: transparent #ffe200 #ffe200 transparent;
}