Javascript 无法在SVG对象标记上触发悬停

当我将鼠标悬停在

上时，我试图触发svg动画。

---

我必须在我的对象标记上使用

来启用我的

嗨，在那里，您所需的悬停功能可以通过以下方式实现

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

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

您试图在
#faceb
上触发鼠标悬停事件，但您的代码没有显示鼠标悬停时发生的情况。要进行测试，请将第二行替换为
$（'faceb'）.css（'background'，'red'）并查看是否发生了任何事情。这将告诉您是否正在触发
.hover
事件。@Sablefoste我已经尝试了您所说的，并且是的，正在触发hover事件。我试图触发鼠标悬停状态为活动状态，因为我的范围覆盖了我的对象，当我将鼠标悬停在上面时，它只能读取范围。但同时，我希望我的对象标记hover被激活，因为我有一个hover动画。如果你试图在hover上启动一个动画，这可以通过css来完成。通过使用svg元素的：hover，将动画播放状态更改为运行，可以在此处找到一个示例：我以前尝试过使用动画播放状态来定位对象，但它不起作用。我试图找到一种方法，以对象标记的悬停状态为目标，激活由对象标记链接的svg中的背景颜色更改。
.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;
}

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

<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>

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