変更クラスのSVGポリゴン

Question

の上に第2のためにホバリングした後、私はSVGのポリゴンが表示されてい、私は何をしたいです：マウスがオブジェクトの上に推移した場合、1秒間待ってからクラスを変更

。

ユーザーが外に出ると、1秒前に何も起こりません。

私が達成したいのはhttp://codepen.io/jdsteinbach/pen/CsypFですが、svg要素は1秒後に輝く必要があります。私がこれまで持って何

は次のとおりです。

$("#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でそれを行うことができます

Answer 1

：

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>