如何摆脱悬停时锚点内图片元素上出现的 background-color 条带？

Question

我使用 picture 元素渲染我网站上几个图标的深色和 light-mode 版本。

这些图片恰好位于锚元素内，因此我可以将它们与文本标题一起设置为可点击 links。

<a href="https://github.com/Antrikshy">
  <picture>
    <source srcset="/path/to/github-mark-dark.png" media="(prefers-color-scheme: light)">
    <source srcset="/path/to/github-mark-light.png" media="(prefers-color-scheme: dark)">
    <img src="/path/to/github-mark-dark.png">
  </picture>
  <br/>
  <small>More on GitHub</small>
</a>

当我尝试像这样在我的网站上设置 link 样式时...

a:hover {
  background-color: var(--brand-color-2);
  color: var(--main-background-color);
}

...当 link 悬停在上时， 会导致这些 picture 元素在其上呈现小条背景色。

当然，我只希望文本在悬停时接收这些样式。

我似乎绝对无法摆脱那条带子。我确实注意到设置 picture { font-size: 0; } 似乎稍微向上移动了行，但它们保持相同的大小。

Answer 1

要删除不需要的条带，请使用此 CSS（即具体说明您只希望文本在悬停时具有更改的背景颜色）

a:hover small {
  background-color: var(--brand-color-2);
  color: var(--main-background-color);
}

否则图片的透明部分也会获得背景颜色。

更新，因为这不合适，因为如果想在整个站点设置链接样式，则必须找到另一种防止透明位显示背景色的方法。

最简单的好像是设置

a picture { background-color: white; }

尽管为了在整个网站上更好地通用，使用 CSS 变量而不是固定颜色，或者如果使用不同的颜色背景则更具体。

如何摆脱悬停时锚点内图片元素上出现的 background-color 条带？

How to get rid of a strip of background-color appearing over a picture element inside an anchor on hover?

html

css

image

hover