小编lui*_*uis的帖子

如何在按钮悬停时更改 svg 颜色

我正在尝试在按钮悬停时更改 SVG 的颜色。

我尝试使用button:hover + svg,但这似乎不起作用。

当我运行 CSS 时,SVG 填充为白色,当我将鼠标悬停在按钮上时它不起作用。我看到它工作的唯一方法是,如果我不将初始填充设置为橙色并让它为黑色。

怎么了?

.box-button {
  border: 1px solid orange;
  color: orange;
  padding: 15px 0px;
  text-align: center;
  margin: 5px 5px;
  width: 90%;
  font-size: 1.2rem;
}

.box-button:hover {
  background-color: orange;
  color: white;
}

.box-button:hover+.icon-svg {
  fill: white !important;
}

.icon-svg {
  fill: orange;
}
Run Code Online (Sandbox Code Playgroud)
<button class="box-button">
  <div class="svg-container">
    <svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
      <path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 …
Run Code Online (Sandbox Code Playgroud)

html css svg hover

2
推荐指数
1
解决办法
291
查看次数

标签 统计

css ×1

hover ×1

html ×1

svg ×1