无法在 SVG 对象标签上触发悬停答案

【问题标题】：Unable to trigger hover on SVG object tag无法在 SVG 对象标签上触发悬停
【发布时间】：2017-02-23 15:44:40
【问题描述】：

当我将鼠标悬停在<span> 上时，我正试图触发我的 svg 动画。我必须在我的对象标签上使用<span> 才能使我的<a> 工作，但后来我无法为我的 svg 激活我的 :hover。

我已经尝试了所有使用 JavaScript 触发的方法，但仍然无法做到。知道是否可能吗？

HTML：

<div class="links">  
<a href="http://www.facebook.com" title="facebook" class="facebook">
<span id="fbI"><object class="icon" id="faceb" type="image/svg+xml" data="images/fb.svg">  
<img src="images/fb.svg" alt="ssRight"/>
</object></span>
</a>
</div>

CSS：

.links a
{
    position: relative; 
    z-index: 1;
}

.links a span
{
     display: block;
    border-bottom: 3px solid white;
}

.links a object
{
    display: inline;
    position: relative; 
    z-index: -1;
}

JavaScript：

$('span#fbI').hover(function(e) {
$('#faceb').trigger('mouseover');
})

对象标签 SVG 代码：

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.45 79.45">
<defs>
<style>
  .cls-1 {
    fill: #878484;
  }

  .cls-2 {
    fill: #fff;
  }

    svg:hover #bg
    {
        fill: #205599;
    }


</style>
  </defs>
  <title>fb</title>
  <g>
    <circle id="bg" class="cls-1" cx="39.73" cy="39.73" r="39.73"/>
    <path id="fb" class="cls-2" d="M-897.51-    494c0,3.22,0,6.43,0,9.65a1,1,0,0,1-    1.2,1.19c-2.27-.05-4.54,0-    6.81,0a0.89,0.89,0,0,1-1.09-1.09c0-6.43,0-12.86,0-19.3,0-1.17,0-1.16-1.16-1.1-  0.85,0-1.7,0-2.55,0a0.58,0.58,0,0,1-.67-0.69c0-2,0-4,0-6.05a0.64,0.64,0,0,1,.8-0.75c0.88,0,1.77,0,2.65,0a0.76,0.76,0,0,0,1-.94,39.91,39.91,0,0,1,.11-5.85,7.72,7.72,0,0,1,7.65-7.07c2.3-.06,4.6-0.07,6.9-0.14a0.79,0.79,0,0,1,1,1c0,1.86,0,3.72,0,5.58a0.66,0.66,0,0,1-.81.81c-1,0-2.08,0-3.12,0-1.83,0-2.54.72-2.76,2.52-0.13,1.07,0,2.14-.08,3.21a0.66,0.66,0,0,0,.82.82c1.64,0,3.28,0,4.92,0,0.7,0,1,.18.87,0.92-0.23,2-.41,3.95-0.57,5.92a0.7,0.7,0,0,1-.83.76c-1.39,0-2.78,0-4.16,0-0.67,0-.94.11-0.91,0.86,0.06,1.64,0,3.28,0,4.92s0,3.22,0,4.82h0Z" transform="translate(940.65 544.4)"/>
  </g>
</svg>

[突出显示的框是跨度框，正如您在我的代码中看到的那样，一旦我显示：块；它会覆盖我的对象标签，因此无法触发我的悬停。][1]

【问题讨论】：

您试图在#faceb 上触发鼠标悬停事件，但您的代码没有显示鼠标悬停时发生的情况。要进行测试，请将您的第二行替换为 $('faceb').css('background','red'); 并查看是否发生任何事情。这将告诉您是否正在触发 .hover 事件。
@Sablefoste 我已经尝试了你所说的，是的，悬停事件正在被触发。我试图触发鼠标悬停状态处于活动状态，因为我的跨度覆盖了我的对象，当我将鼠标悬停时，它只能读取跨度。但同时，我希望我的对象标签悬停是活跃的，因为我有一个悬停动画。

标签： javascript jquery html css svg

【解决方案1】：

您好，您想要的悬停功能可以通过以下方式实现。

$( "span#fbI" ).hover(function() {
  $('#fbI').css('background','purple')
});

这是 jsfiddle。我不知道你想要什么效果，所以我把它变成了紫色。

https://jsfiddle.net/qansvs0n/4/

【讨论】：

如果您尝试在悬停时启动动画，则可以使用 css 完成。通过使用 :hover 的 svg 元素，将动画播放状态更改为运行。可以在此处找到一个示例：stackoverflow.com/questions/35124550/animating-an-svg-on-hover
我之前尝试过使用动画播放状态来定位对象，但它不起作用。我正在尝试找到一种方法来定位对象标签的悬停状态，以激活对象标签链接的 svg 内的背景颜色变化。