鼠标悬停时如何更改图标
我有两个 svg 图标，当将鼠标指针悬停在 html 上时，我想在 html 中从一个图标更改为另一个图标，但是我对图标很陌生，有人可以帮忙吗？
我想让白色图标在用鼠标指向它时变成黑色。我正在尝试制作一个带有链接的“设置图标”；）
我这里有 svg 代码：
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<g id="settings-on_1_">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</svg>
慕神8447489浏览 170回答 4
4回答
-
噜噜哒
在此输入链接描述请参考上面的示例并动态传递您的图像！<!DOCTYPE html><html><body><img onmouseover="changeImg(this)" id="myImage" onmouseout="normalImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="62" height="62"><p>On Image hover Example</p><script>var image = document.getElementById('myImage');function changeImg(x) { image.src = "https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png";}function normalImg(x) { image.src = "https://www.w3schools.com/jsref/smiley.gif";}</script></body></html>请尝试更改为我为 PNG 所做的SVG 。步骤去做。尝试实现 onHover 事件实现两个函数onHover和normal函数现在通过使用 document.getElementById('myImage') 获取 Id 将永久图像添加到普通函数对另一张图像执行同样的操作 -
明月笑刀无情
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none"> <style type="text/css"> .st0 { fill: #393B3D; } .st1 { fill: #7B7C7D; } .st2 { fill: #767879; } </style> <g id="settings-on_1_"> <path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9 c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2 c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2 c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4 l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S45.3,104,42,104z"></path> </g> <g id="settings_1_"> <g> <path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105 c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6 l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87 c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4 l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9 c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5 C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4 l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1 c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4 l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8 c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1 c0.5,0.1,0.8,0.5,0.8,1V108z"></path> </g> <g> <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4 S16.2,94,14,94z"></path> </g> </g></svg>这是您要求的“johannchopin”设置的新代码_1_ <style type="text/css"> </style> <g id="settings_1_" transform="translate(-2,-86)"> <g> <path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105 c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6 l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87 c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4 l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9 c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5 C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4 l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1 c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4 l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8 c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1 c0.5,0.1,0.8,0.5,0.8,1V108z"/> </g> <g> <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4 S16.2,94,14,94z"/> </g> </g> <use id="elUse" xlink:href="#settings_1_"/></svg> ```And here is setting_on_1.svg ```<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="navigation" x="1px" y="1px" width="27px" height="27px" viewBox="0 0 1 9,5" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none"> <g id="settings-on_1_"> <g transform="translate(-29,-85)" id="settings_on_1_"> <path id="setting" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9 c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2 c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2 c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4 l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S45.3,104,42,104z"/> </g></g></svg>``` -
慕尼黑5688855
我已将图标放入 defs 元素中。另外，由于元素在绘制时在 svg 画布上具有不同的位置，因此我将它们转换回相同的位置。我将第一个图标与<use>元素一起使用。接下来我使用 javascript 来更改 on mouseover 和 mouseleaave 的值xlink:href。我希望它有帮助const SVG_XLINK = "http://www.w3.org/1999/xlink";navigation.addEventListener("mouseover",(e)=>{ elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_on_1_');})navigation.addEventListener("mouseleave",(e)=>{ elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_1_');})body{background:white;}svg{border:solid}<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" viewBox="0 0 24 24" > <style type="text/css"> .st0 { fill: #393B3D; } .st1 { fill: #7B7C7D; } .st2 { fill: #767879; } </style><defs> <g id="settings_on_1_" transform="translate(-30,-86)"> <path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9 c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2 c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2 c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4 l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S45.3,104,42,104z"></path> </g> <g id="settings_1_" transform="translate(-2,-86)"> <g> <path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105 c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6 l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87 c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4 l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9 c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5 C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4 l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1 c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4 l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8 c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1 c0.5,0.1,0.8,0.5,0.8,1V108z"></path> </g> <g> <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4 S16.2,94,14,94z"></path> </g> </g> </defs> <use id="elUse" xlink:href="#settings_1_" /></svg> -
智慧大石
您可以只使用一个 svg，然后使用当svg:hover您将鼠标悬停在其上时希望其显示的颜色。svg:hover { fill: red/black/...;}
随时随地看视频慕课网APP
相关分类
Html5