带有悬停问题的 HTML img 标签

Question

我很难弄清楚为什么我无法让此处的图像在悬停时改变颜色。图像本身是 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> 

和关联的 CSS:

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

Answer 1

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

.toolTile img:hover {
    border: Yellow 1px solid;
}

这是它的一个 JSfiddle:https://jsfiddle.net/td70mqq5/

如果这不是您想要的，请研究一下:svg {fill: currentColor;} ( https://css-tricks.com/cascading-svg-fill-color/ )