将鼠标悬停在图像上时如何更改 SVG 的颜色？

Posted 2023-03-25

【中文标题】将鼠标悬停在图像上时如何更改 SVG 的颜色？

【英文标题】：How to change the color of the SVG when hovering over the image?

【发布时间】：2021-12-18 07:48:27

【问题描述】：

我有一张图片（带有链接）和中间的 YouTube 徽标。

当我将图片悬停时，我希望 YouTube 徽标为红色。

目前它不工作。我必须将鼠标悬停在徽标上才能改变颜色，我希望它在我将鼠标悬停在图像上时立即改变。

这是一个示例（将鼠标悬停在页面底部的视频上）：

https://support.google.com/youtube/answer/9057455?hl=fr

这是我的代码：

#youtube-remote,
#youtube-remote .youtube-remote-container 
    display: flex;
    justify-content: center;
    align-items: center;


#youtube-remote svg 
    position: absolute;
    background-color: #ffffff;
    color: #000000;


#youtube-remote svg:hover 
    background-color: #ffffff;
    color: #ff0000;

<div id="youtube-remote">
  <a href="https://www.youtube.com" target="_blank">
    <div class="youtube-remote-container">
      <img src="https://img.youtube.com/vi/ZLga1SIE1HA/maxresdefault.jpg"    loading="lazy">
      <svg xmlns="http://www.w3.org/2000/svg"   fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
      </svg>
    </div>
  </a>
</div>

【问题讨论】：

试试这个#youtube-remote img:hover svg fill: #ff0000;

@MB 谢谢，我刚测试过，但是悬停没有效果

@MB_ 好的，谢谢，我找到了#youtube-remote a:hover svg fill: #ff0000;

@MB_ 最后一个问题，我正在使用这个 svg icons.getbootstrap.com/icons/youtube 你知道我怎样才能使内部（三角形）变成白色吗？谢谢

【参考方案1】：

只需将 :hover 伪类添加到图像而不是 svg 上。此外，您应该使用 'fill' 而不是 background-color 让 svgs 仅正确填充路径:)

如果您希望中间三角形永久为白色（如链接的视频中所示），您需要向 svg 添加另一条路径并用白色填充。

编辑：添加了中心播放按钮路径（只是从引用的页面 + 其视图框中复制了 SVG）并在悬停时更改了不透明度。

#youtube-remote,
#youtube-remote .youtube-remote-container 
    display: flex;
    justify-content: center;
    align-items: center;


#youtube-remote svg 
    position: absolute;
    opacity: 0.8;


#youtube-remote:hover svg 
    opacity: 1;


#youtube-remote:hover .play-outer 
    fill: red;

   

 <div id="youtube-remote">
  <a href="https://www.youtube.com" target="_blank">
    <div class="youtube-remote-container">
      <img src="https://img.youtube.com/vi/ZLga1SIE1HA/maxresdefault.jpg"    loading="lazy">
      <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 68 48">
        <path class="play-outer" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
        <path d="M 45,24 27,14 27,34" fill="white"/>
      </svg>
    </div>
  </a>
</div>

【讨论】：

谢谢，已经很完美了，但是我不明白如何将三角形着色为白色以及如何使徽标在未悬停在icons.getbootstrap.com/icons/youtube上时略微透明@

@zoulou66 你去 :)