JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
<div class="hover">hover me</div>
<div class="cool">cool</div>
</div>

CSS

body { background-color: black; }
.hover { border: solid red; height: 40px; width: 40px; z-index: 1; color: white; }

iframe {position: relative; left: 40px;  }

.test { border: solid blue; position: absolute; height: 300px; width: 500px; z-index: 3; }

.cool { border: solid purple; background-color: black; }

JavaScript

$(document).ready(function(){
    $(".hover").on({
        mouseover: function(){
            $(this).next('.cool').html('<iframe width="370" height="215" src="//tsn.com" frameborder="0" ></iframe>');
        }
    });
});

$(document).ready(function() {
    $('.test').hover(function() {



    }, function() {
        $('.cool').html('');

    });
});