如何在悬停时更改png的颜色？

I made a "down arrow" in illustrator and saved it as a png with a transparent background. When I put it into my webpage as an img, it shows up in the original color, which is okay. I'm trying to do

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

  img:hover{color:red;}

and it doesn't work.

它不起作用。

Does anyone know how to make it work?

有谁知道如何使它工作？

Thanks

谢谢

4 个解决方案

#1

If you target modern browsers, you may use CSS filters.

如果您定位现代浏览器，则可以使用CSS过滤器。

The hue-rotate filter is suitable for changing colors:

色调旋转滤镜适用于改变颜色：

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

The exact amount of degrees depends on your image and expected results.

确切的度数取决于您的图像和预期结果。

Note that CSS filters is a new feature, and its browser support is limited.

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

Alternatively, you may use CSS sprites technique, which works in all browsers of reasonable age.

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

#2

What you need to do is set the image as a background-image using CSS. Then set a hover state using another version of the image (with a different colour). For example:

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

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

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

Depending where you're putting the image/class, you'll need to assign appropriate height/width (or using padding).

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

#3

You can change the color of the image with an identical image of another color with an event (like hover).

您可以使用与事件（如悬停）相同的另一种颜色图像来更改图像的颜色。

html:

HTML：

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

css:

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;
    }

In detail here: http://css3.bradshawenterprises.com/cfimg/

在这里详细说明：http：//css3.bradshawenterprises.com/cfimg/

#4

Applying:

应用：

{color:red}

to any element means changing text color.

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

Try changing:

尝试改变：

img:hover {color:red}

to:

至：

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

and this works if you only have one image. If you have many images and you want only one to change on hover, then set an ID for the image you want to change and change img and img:hover to #x and #x:hover and replace x with the name you given for the ID.

如果你只有一个图像，这个工作。如果您有许多图像，并且您只希望在悬停时更改一个图像，则为要更改的图像设置ID，并将img和img：hover更改为#x和#x：hover并将x替换为您为其指定的名称身份证。

Here's an example (assume other HTML is intact and properly formatted):

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

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

#1