Question

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

  img:hover{color:red;}

并且它不起作用。

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

由于

Answer 1

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

hue-rotate过滤器适合更改颜色：

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

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

请注意，CSS过滤器是一项新功能及其browser support is limited。

或者，您可以使用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

我还想知道一种简单的方法来做到这一点：

with cte_ctotal
as (
    select gl2.MessageID,
        gl2.VisitID,
        gl2.BillOfLading,
        gl2.description,
        COUNT(distinct gl2.ContainerID) as CTOTAL
    from tblEDIGoodsLines as gl2
    group by gl2.MessageID,
        gl2.VisitID,
        gl2.BillOfLading,
        gl2.description
    ),
cte_containers
as (
    select
    a.ContainerID,
    gl.MessageID,
    gl.VisitID,
    gl.BillOfLading,
    gl.Description,
    case 
        when e.PortID = 9
            then 'Export'
        when e.PortID = 11
            then 'Import'
        else 'ERROR'
        end as Direction,
    case 
        when ctypes.ID is not null
            then ctypes.ContainerSizeType
        else 'OTH'
        end as CSizeType,
    ctypes.Length_ft + 'ft ' + ctypes.Height_ft + 'ft - ' + ctypes.Characteristics + ' (' + COALESCE(ctypes.Codes1995, ctypes.Codes1984) + ')' as ContainerType,
    from tblEDIGoodsLines gl
    inner join tblEDIEquipmentLines el on el.MessageID = gl.MessageID
                                        and el.ContainerID = gl.ContainerID
    inner join tblEDI e on CHARINDEX(e.MessageID, gl.MessageID) > 0
                        and e.VisitID = gl.VisitID
                        and CHARINDEX('EXCEL', e.MessageRelease) = 0
                        and e.status = 1
    left join tblContainerTypesISO6346 ctypes on ctypes.Codes1984 = el.SizeAndType
                                              or ctypes.Codes1995 = el.SizeAndType
    where gl.status = 1
    and gl.VisitID = 22987
    )
select 
c.MessageID,
c.BillOfLading,
c.Description,
c.Direction,
c.CSizeType,
c.ContainerType,
COUNT(c.ContainerID) as TOTCONT,
SUM(COALESCE(ct.CTOTAL,0)) as TOTUCONT
from cte_containers c
left join cte_ctotal ct on ct.MessageID = c.MessageID
                       and ct.VisitID = c.VisitID
                       and ct.BillOfLading = c.billoflading
                       and ct.description = c.description
group by c.MessageID,
    c.BillOfLading,
    c.Description,
    c.Direction,
    c.CSizeType,
    c.ContainerType;

或

.img:hover {
      background: red;
}

，但没有找到简单的跨浏览器支持解决方案。但是，我发现某些浏览器解决方案正在使用具有.img:hover { color: red; }属性的SVG图像，可以通过CSS轻松设置该属性。

但是，如果您使用超棒的字体（基本上是一种字体，而不是带有不同图标的字符），则可以使用简单的CSS属性fill轻松控制，就像 第二个 示例

因此，如果您想要最简单的解决方案-为您的项目找到与您使用的图像相对应的SVG图像。我发现此过程有些痛苦，因此决定学习如何将png和color和.jpg转换为.png。有一个命令行工具可以帮助您完成此任务，它称为potrace。如果您决定使用此工具，我建议您看的一件事是使用简单的编辑器对要转换为给定.svg的{{1}}的所有内容进行对比暗和白色/浅色（不透明）为背景以及您不想在path文件中看到的区域。

Answer 5

申请：

{color:red}

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

尝试更改：

img:hover {color:red}

为：

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

如果您只有一张图片，则此功能正常。如果您有许多图像，并且您只希望在悬停时更改一个图像，则为要更改的图像设置ID并更改img和img：hover到#x和#x：hover并将x替换为您为其指定的名称ID。

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

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

Answer 6

理解这是一篇旧帖子，但我发现应用 Richard 采用的方法是有效的，但是在高度和宽度上添加 0px，然后调整边距和填充有效。

.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的颜色？

6 个答案: