有什么方法可以为 svg 文件添加悬停效果？答案

【问题标题】：Is there any way to add hover effects to svg files?有什么方法可以为 svg 文件添加悬停效果？
【发布时间】：2017-09-27 14:39:00
【问题描述】：

情况：项目包含完整的 png 图像，分层的 png 透明度保存为 SVG。

<html>
   <head><title></title>
   </head>
   <body>
    <div id="templatemo_header">
        <div id="site_title">
            <p></p>
            <p>
                <a href="#">
                <b>SUPPLY CHAIN STRATEGIC SOURCING</b>
            </a>
            </p>
            <!-- <img src="gifs/hidden_logo.png" alt="hidden logo" width="256" height="116"></img> -->

        </div>
        <p id="intro-text">#WEGSD (We Get Stuff Done) - Supply Chain Team
        </p>
    </div>
<div class="svg">
<svg xmlns:***lots of data
<image
     width="721"
     height="726"
     preserveAspectRatio="none"
     style="image-rendering:optimizeQuality"
     xlink:href="data:image/png;base64****lots of data > </image>

    <a class="fancybox letter-box" title="Invoice Processing" href="invoice_processing.html" data-fancybox-type="iframe" id="invoice-processing"  >

        <image
     y="37.4552"
     x="126.97877"
     id="image55"
     xlink:href="data:image/png;base64******lots of data> </image> </a>
    <a class="fancybox letter-box" title="Payment Release" href="payment_release.html" data-fancybox-type="iframe" id="payment-release"  ><image
     y="18.073133"
     x="367.49765"
     id="image66"
     xlink:href="data:image/png;base64*****lots of data> </image></a>

链接到实时代码：[已删除] 分层图像应该在悬停时略微抬起。这适用于除 IE 之外的所有浏览器。我已经尝试将所有内容都放在 DIVS 中，各种性质的，尝试了各种标签，尝试了 IE 条件语句，但我无法让它在 IE 中工作。如果我故意用条件 IE 语句打破它，它会使分层图像不对齐，并将它们显示为空白轮廓框；这反过来会在悬停时升起.....<image> 持续 9 次。没有人想要伪代码，但这是我能得到的最接近的。因为我不能在不超过字符限制的情况下正确显示任何内容。

【问题讨论】：

请创建一个minimal reproducible example 而不仅仅是给我们一些伪代码。
添加了实际使用代码的链接。
这个站点上托管的示例通常是最好的，假设它是所有客户端，您应该能够将相关标记复制粘贴到 sn-p 中。（人们点击它会更舒服，并且无论何时删除它都不会改变/消失，这使得该问题对未来的观众更有帮助）
我同意。但是由于很多都是base64 ......所以滚动很多......但如果需要，我可以将整个html放入小代码框中。
你没有做对，我们想要一个最小的例子，不需要太多的标记。

标签： javascript jquery html css svg

【解决方案1】：

有很多方法可以做到这一点，一种简单的方法是使用 CSS 添加样式，例如：

.someclass : hover { background-color: black; }

检查一下： https://plnkr.co/edit/uyngUBVCU7yLPGUCUX2l?p=preview

【讨论】：

我就是这么想的。但是我需要的东西在 IE 中不起作用。我的班级名称是“信箱”.letter-box { -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .letter-box:hover { -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); }
我已将 plunker 更新到您的班级，并且它很容易工作。你能用你的整个问题创建一个新的 plunkr 吗？谢谢plnkr.co/edit/jedejH4sqjpj3V9kcGgj?p=preview