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

Question

我有一个 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>

谢谢!!

Answer 1

你可以用 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>