时间戳

首页 > 解决方案 > 当我将鼠标悬停在它上面时，我的 SVG 按钮没有改变颜色

html - 当我将鼠标悬停在它上面时，我的 SVG 按钮没有改变颜色

问题描述

我有一个按钮，里面有一个 SVG，在我的 CSS 中，当你将鼠标悬停在它上面时，图标会改变颜色，这与 SVG 相同。但是我必须将鼠标直接放在 SVG 上来填充颜色，我是 SVG 的新手，所以如果有人可以帮助我放一张截图和我使用的代码。在此处输入图像描述

.icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

svg:hover {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}
<button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

标签： htmlcsssvgbuttonhover

解决方案

因此，您将鼠标悬停在父级上，但想要更改子级的属性。因此，您可以将悬停效果设置为父级，然后将更改写入子级。

像这样：

.icon:hover svg{
  fill: white;
}


.icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

.icon:hover svg {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}
<button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

推荐阅读