Question

有带文字和箭头图像的按钮：

＆＃13;

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

＆＃13;

<button class="button">Next</button>

＆＃13;

所以，我需要在没有javascript的情况下在悬停时更改箭头的笔触颜色。如何使它成为可能？

UPD Stackoverflow不允许添加内容svg-file。我将它公之于众：https://gist.github.com/bibimij/a5ae9dcc309db5547a31

Answer 1

如果没有看到你的svg文件，你可以用你需要的颜色创建一个新的图像文件吗？

background：url（＆＃34; /svg/right-arrow-hovercolor.svg"）no-repeat;

Answer 2

我用svg创建了一个箭头试试这个

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;
  padding-right:30px;
}
.button svg{
  transform:scale(.5,.5);
  position:absolute;
  margin-top:-45px;
  margin-left:5px;
  }
.button:hover {
  background: #00aef4;
  color: #ffffff;
}

.button:hover svg path{
  fill:#00aef4;
  stroke:white;

<button class="button">Next
<svg width="50" height="60">
     <path d=" m 0 20 30 0 0 -20 20 30 -20 30 0 -20 -30 0 "fill="white" stroke="#00aef4" stroke-width="2"/>
  </svg>
  </button>

在悬停时更改背景svg的笔画

2 个答案: