Question

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

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

如果用户徘徊，在一秒钟之前没有任何反应。

我希望实现的是http://codepen.io/jdsteinbach/pen/CsypF，但svg元素必须在一秒钟之后发光。

到目前为止我所拥有的是：

＆＃13;

 $("#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");

   }
 );

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢！

Answer 1

只能使用带延迟的转换来执行css：

transition: stroke 0.01s 1s;

1s会延迟实际转换，实际转换时间非常小，不会发生实际转换。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: