JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trigger"></div>
<div class="trigger" "style=margin-top:200px"></div>
<div class="trigger"></div>
<div class="trigger"></div>

CSS

.trigger {background-color: red; height: 25px; width: 25px;}
.outer {background-color: blue; padding: 25px; width: 25px;}

JavaScript

$('div.outer').live("mouseleave", function(e) {
    $('.trigger', this).unwrap();
});

$('.trigger').mouseenter(function() {
    $(this).wrap("<div class='outer'>");
});