JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="magic">
    <div class="pop-out"><p>Hello</p></div>
    <div class="pop-out"><p>These are hidden</p></div>
</div>

CSS

.magic {width: 100px; height: 100px; background: lightGrey;}

JavaScript

$('.pop-out').hide();


// Add a hover listener for actions
$(document).ready(function(){
function actionHoverInListener() {
    $('.pop-out').show('slide', { direction:'left' });
};
function actionHoverOutListener() {
    $('.pop-out').hide('slide', { direction:'left' });
};
$('.magic').hoverIntent(
         actionHoverInListener,
         actionHoverOutListener
);
});