JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app al-init="t=0">

  <div class="box"
    @mouseenter="t=1"
    @mouseenter.throttle-500="t*=2"
    @mouseleave="t=0"
    :style.background-color="t>1?'red':''">
  
  </div>

  <div>t={{t}}</div>
  <div :hidden="!t">hovered</div>
  <div :hidden="t<2">hovered +500ms</div>
  

</div>

CSS

.box {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}