小编lbl*_*hip的帖子

在悬停另一个元素时更改SVG填充颜色

我今天一直在研究如何在悬停时更改svg填充颜色.我已经能够通过使用对象标记并链接到我的CSS文件来使其工作,以便我可以在外部设置它.但是,当我实际上将鼠标悬停在SVG上时,我只能将其工作.我在标签中有我的对象和文本标签,并希望在悬停时同时更改SVG的填充和文本标签的颜色.当我尝试从对象进一步向上定位时,它不起作用.我相信我读到对象内的SVG将无法识别任何父元素,所以我不确定这是不是问题.任何帮助,将不胜感激!下面是我的html片段.我应该指出类"icon-md"只定义了SVG的高度和宽度.

<div class="icon-button">
            <a href="#">
                <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3>
            </a>
        </div>
Run Code Online (Sandbox Code Playgroud)

这也是我的SVG文件的HTML.我给了实际路径一个id"path",这就是我在外部CSS文件中专门定位的内容.

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L …
Run Code Online (Sandbox Code Playgroud)

html css svg hover

0
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

hover ×1

html ×1

svg ×1