带有悬停问题的HTML img标记

我很难理解为什么我不能让图片在悬停时改变颜色。图像本身是svg文件，应该只采用颜色。守则：

HTML:

---

颜色与文本元素有关，需要边框

。工具文件img:hover{
边框：黄色1px实心；
}

CSS不适用于跨文档边界。HTML中的CSS不会应用于外部SVG文件的内容

---

您必须在HTML文件中内联SVG，或者您可以将样式移动到SVG文件中，并将

元素更改为

元素。

图像标记中的SVG不属于您的文档，它是另一个，不能从那里设置样式。“旁边颜色”仅用于文本，如果未设置，则可以通过边框颜色继承。这就是为什么它不起作用的两个原因。我不希望边框悬停到不同的颜色，我希望图像悬停到不同的颜色。@Mark如果svg在HTML中，您可以使用填充，而不是颜色。您应该查找一些教程；）

<div class="toolTile col-md-3">
    <a href="#/cards">
        <img src="ppt/assets/toolIcons/requestnewcard.svg" >
        <p>Manage my debit card</p>
    </a>
</div>        
<div class="toolTile col-md-3">
    <a href="#/recurClaim">
        <img src="ppt/assets/toolIcons/recurring.svg" >
        <p>Recurring Claims</p>
    </a>
</div> 

.toolTile {
    height: 200px;
    float: left;
}

.toolTile img {
    color: #ab2328;
    height: 100px;
    width: 93px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.toolTile img:hover {
    color: yellow;
}