javascript - Change class after hovering for a second over svg polygon -
i have svg polygon displayed, want is:
when mouse hovered on object, wait 1 second , change class.
if user hovers out, before 1 second nothing happens.
what achieve http://codepen.io/jdsteinbach/pen/csypf svg element must glow after second.
what have far is:
$("#firstobject").stop().hover( function() { //hovered in //delay , 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, browser not support inline svg. </svg>
thanks!!
you can css using transition delay:
transition: stroke 0.01s 1s;
the 1s delays actual transition, , actual transition time small no actual transition occurs.
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, browser not support inline svg. </svg>
Comments
Post a Comment