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

颜色与文本元素有关，你想要边框。

＆＃13;

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

＆＃13;

以下是它的JSfiddle：https://jsfiddle.net/td70mqq5/

如果那不符合您的要求，请进行一些研究：svg {fill: currentColor;}（https://css-tricks.com/cascading-svg-fill-color/）

Answer 2

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

您必须在HTML文件中内嵌SVG，或者您可以将样式移动到SVG文件并将<img>元素更改为<object>元素。

带有悬停问题的

2 个答案: