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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -