JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<script src="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.css">
<p>I am a yellow <span class="test">dog</span>, drinking a spotted cow.<p>

JavaScript

$(".test").fancybox({
    href: "http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg"
});

$(".test").hover(function() {
    $(this).click();
    $("#fancybox-overlay").remove(); //remove the overlay so you can close when hover off.
}, function() {
    $.fancybox.close();
});