ändern Klasse nach für eine Sekunde über svg Polygon schwebt

Question

Ich habe ein SVG Polygon angezeigt, was ich tun möchte, ist:

Wenn die Maus über das Objekt schwebte ist, warten eine Sekunde und dann die Klasse ändern.

Wenn der Benutzer aushebt, passiert vor einer Sekunde nichts.

Was ich erreichen möchte, ist etwas wie http://codepen.io/jdsteinbach/pen/CsypF aber das Svg-Element muss nur nach einer Sekunde leuchten.

Was ich habe, so weit ist:

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

Dank !!

Answer 1

Sie können es mit CSS nur mit Verzögerung mit Übergang:

transition: stroke 0.01s 1s; 

Die 1s verzögert den tatsächlichen Übergang, und die tatsächliche Übergangszeit ist so klein, dass kein tatsächlicher Übergang erfolgt.

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>