有带有文字和箭头图像的按钮:
button {
background: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #00aef4;
border: 2px solid #00aef4;
display: inline-block;
font-weight: normal;
line-height: 2.3;
margin: 0;
outline: 0;
padding: 0 1em;
text-align: center;
vertical-align: middle;
}
.button:after {
background: url("/svg/right-arrow.svg") no-repeat;
content: "";
display: inline-block;
height: 12px;
margin-left: 10px;
width: 8px;
}
.button:hover {
background: #00aef4;
color: #ffffff;
}
<button class="button">Next</button>
所以,我需要在没有 javascript 的情况下更改悬停时箭头的描边颜色。如何让它成为可能?
UPD Stackoverflow 不允许添加内容 svg 文件。我将其发布到要点:https://gist.github.com/bibimij/a5ae9dcc309db5547a31
最佳答案
在看不到 svg 文件的情况下,您可以创建一个具有所需颜色的新图像文件吗?
背景:url("/svg/right-arrow-hovercolor.svg") 不重复;
关于html - 悬停时更改背景 svg 的描边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29608316/