如何改变悬停时png的颜色？

Question

我在illustrator中制作了一个“向下箭头”，并将其保存为透明背景的png。当我将它作为 img 放入网页时，它以原始颜色显示，这没关系。 我正在努力做

  img:hover{color:red;}

但它不起作用。

有人知道如何让它发挥作用吗？

谢谢

Answer 1

2023 年更新

您可以使用 CSS

hue-rotate

过滤器来更改图像颜色：

img:hover {
  filter: hue-rotate(180deg);
}

大多数现代浏览器都支持它 - 请参阅CanIUse。

此外，您还可以将图像另存为 SVG（而不是 PNG），并根据需要设置 SVG 任何部分的样式。

原始答案（2015）

如果您的目标是现代浏览器，您可以使用 CSS 过滤器。

hue-rotate

滤镜适合改变颜色：

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

确切的度数取决于您的形象和预期结果。

请注意，CSS 过滤器是一项新功能，其浏览器支持有限。

---

或者，您可以使用 CSS sprites 技术，该技术适用于所有合理年龄的浏览器。

Answer 2

您需要做的是使用 CSS 将图像设置为背景图像。然后使用图像的另一个版本（具有不同的颜色）设置悬停状态。例如：

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

根据您放置图像/类的位置，您需要分配适当的高度/宽度（或使用填充）。

Answer 3

您可以通过事件（如悬停）将图像的颜色更改为另一种颜色的相同图像。

html:

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

CSS：

   #cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
      opacity:0;
    }

详细内容请看这里： http://css3.bradshawenterprises.com/cfimg/

Answer 4

我也想知道一种简单的方法，例如：

.img:hover {
      background: red;
}

或

.img:hover {
      color: red;
}

但没有找到简单的跨浏览器支持解决方案。然而，我发现一些浏览器解决方案使用的 SVG 图像具有

fill

属性，可以通过 CSS 轻松设置。

但是，如果您使用 font-awesome （基本上，它是一种字体，而不是字符，您有不同的图标），则可以使用简单的 CSS 属性轻松控制

color

，就像在第二个示例中

因此，如果您想要最简单的解决方案 - 为您的项目找到与您使用的图像相对应的 SVG 图像。我发现这个过程有点痛苦，决定学习如何将 png 和

.jpg

和

.png

转换为

.svg

。有一个命令行工具可以帮助您执行此操作，它称为 potrace。如果您决定使用此工具，我建议您查看的一件事是使用简单的编辑器来对比您想要转换为给定 path 的所有内容的

dark

和白色/浅色

（不透明） 

为背景和您不想在 .svg 文件中看到的区域添加颜色。

Answer 5

.svg

任何元素都意味着更改文本颜色。

尝试改变：

{color:red}

至：

img:hover {color:red}

如果您只有一张图像，则此方法有效。如果您有很多图像并且只想在悬停时更改一张图像，请为要更改的图像设置一个 ID，并将 img 和 img:hover 更改为 #x 和 #x:hover 并将 x 替换为您指定的名称身份证号。

这是一个示例（假设其他 HTML 完整且格式正确）：

img:hover {background-image: url('<insert url to red arrow here>');}

Answer 6

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">

Answer 7

.share-icon img {
  background-image: url(../../../images/share-blk.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}

.share-icon:hover img {
  background-image: url(../../../images/share-pur.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}

如果您不打算聚焦 png，请删除与焦点相关的功能

<script>

    const myPng = 'path/to/png';
    const redPng = 'path/to/redPng';
    
    // get the node (say foo) you want this change to take effect
    const foobar = document.querySelector('foo')
    
    // for on focus you have to keep state
    let isFocused = false;
    
    
    
    foobar.addEventListener('mouseover', onMouseOver);
    foobar.addEventListener('mouseout', onMouseOut);
    foobar.addEventListener('focus', onFocus);
    foobar.addEventListener('blur', onBlur);
    
    // if you want to have focus event 
    function onFocus() {
        this.querySelector('img').src = redPng;
        isFocused = true;
    }
    
    function onBlur() {
        isFocused = false;
        onMouseOut.call(this);
    }
    
    // if you want to hover
    
    function onMouseOver() {
        if (!isFocused) {
            this.querySelector('img').src = redPng;
        }
    }
    
    function onMouseOut() {
        if (!isFocused) {
            this.querySelector('img').src = myPng;
        }
    }
 </script>

假设您有 2 个用 illustrator 制作的 png 文件和一个 html 文件。