在 svg 多边形上悬停一秒钟后更改 class

Question

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

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

如果用户将鼠标悬停在外面，一秒前什么也不会发生。

我想要实现的是 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>

在 svg 多边形上悬停一秒钟后更改 class

Change class after hovering for a second over svg polygon

html

javascript

css

svg

hover