javascript - 将鼠标悬停在svg多边形上一秒钟后更改类

我显示了一个SVG多边形，我想要做的是：

当鼠标悬停在对象上时，请等待一秒钟，然后更改类。

如果用户徘徊，则在一秒钟之前什么也不会发生。

我想要实现的是类似http://codepen.io/jdsteinbach/pen/CsypF之类的东西，但是svg元素必须仅在一秒钟后发光。

到目前为止，我有：

 $("#firstObject").stop().hover(
   function() { //hovered in
     //delay it and add new class
     console.log("hovered in");

     setTimeout(function() {
       console.log("hovered in in");

       $("#firstObject").attr("class", "SVGOverVideo1 hoveredObject");
     }, 1000);
   }, function() { //hovered out
     //remove class
     $("#firstObject").attr("class", "SVGOverVideo1");
     console.log("hovered out");

   }
 );

.SVGOverVideo1 {
  fill: transparent;
  stroke: purple;
  stroke-width: 2;
  position: absolute;
  z-index: 1;
  top: 0%;
  left: 0%;
}
.hoveredObject {
  border: double;
  border-color: white;
}

<svg class="SVGOverVideo" id="objectsOverVideoContainer">
  <polygon id="firstObject" class="SVGOverVideo1" points="200,10 250,190 160,210"></polygon>
  Sorry, your browser does not support inline SVG.
</svg>

谢谢！！

最佳答案

您只能使用带有延迟的过渡使用CSS来做到这一点：

transition: stroke 0.01s 1s;

1s延迟了实际转换，并且实际转换时间非常短，以至于没有实际转换发生。

body {
  background: black;
}
.SVGOverVideo1 {
  fill: transparent;
  stroke: purple;
  stroke-width: 2;
  position: absolute;
  z-index: 1;
  top: 0%;
  left: 0%;
}
.SVGOverVideo1:hover {
  stroke: white;
  transition: stroke 0.001s 1s;
}

<svg class="SVGOverVideo" id="objectsOverVideoContainer">
  <polygon id="firstObject" class="SVGOverVideo1" points="200,10 250,190 160,210"></polygon>
  Sorry, your browser does not support inline SVG.
</svg>