主页 / 问题 / 1594579
Accepted
Ярослав Овчар
Asked:2024-09-23 02:44:34 +0000 UTC2024-09-23 02:44:34 +0000 UTC

扩展悬停伪类的 svg 图标操作

  • 772

当您将鼠标悬停在链接上时，图标的背景和颜色必须发生变化。背景没有问题，但对于图标，事实证明它只会在我将鼠标悬停在其上时改变颜色，而不是链接中的任何位置。也就是说，首先出现背景，然后当您将光标拖动到图标本身时，其颜色会发生变化。如何修复它，以便当鼠标悬停在链接的任何区域时图标立即改变颜色？附上所有涉及的代码。

.list-social {
  display: flex;
}

.social-link {
  display: block;
  padding: 12px;
  width: 44px;
  height: 44px;
}

.social-icon {
  width: 20px;
  height: 20px;
  fill: var(--icon-color);
}

.social-link:hover {
  background-color: var(--accent-color);
  border-radius: 50%;
}

.social-icon:hover {
  fill: var(--white);
}
<a href="" class="social-link">
  <svg class="social-icon">
    <use href="./images/icons/symbol-defs.svg#icon-icon-instagram1"></use>
  </svg>
</a>

html

1 个回答

  1. Best Answer

    主要问题在代码中，您将:hover其挂在.social-link和 上.social-icon，但是当您将鼠标悬停在 < 上时您想更改颜色.social-link- 已经有提示。

    .social-link:hover {
  background-color: var(--accent-color);
  border-radius: 50%;
}

.social-link:hover .social-icon {
  fill: var(--white);
}
    • 4

相关问题