在 svg 多边形上悬停一秒钟后更改类答案

【问题标题】：Change class after hovering for a second over svg polygon在 svg 多边形上悬停一秒钟后更改类
【发布时间】：2016-04-19 20:54:33
【问题描述】：

我显示了一个 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>

谢谢！！

【问题讨论】：

标签： javascript html css svg hover

【解决方案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>

【讨论】：