JSFiddle - React, Tailwind, and code Playground

by nickyr3

HTML

<div id="conbox1" class="conbox">
    <div class="boxinner">
        <span class="boxtitle">Box 1</span>
        <span class="dboxcontent">Box 1 content</span>
    </div>
</div>

<div id="conbox2" class="conbox">
    <div class="boxinner">
        <span class="boxtitle">Box 2</span>
        <span class="dboxcontent">Box 2 content</span>
    </div>
</div>

<div id="conbox3" class="conbox">
    <div class="boxinner">
        <span class="boxtitle">Box 3</span>
        <span class="dboxcontent">Box 3 content</span>
    </div>
</div>

CSS

.conbox { background-color: #ccc; width: 130px; height: 130px; float: left; display: inline; margin-right: 15px; }
.boxtitle    { display: block; text-align: center; }
.dboxcontent { display: none; }

JavaScript

$('div.conbox').hover(
                    function() {
                        var activeID = $(this).attr('id');
                        $('#' + activeID + ' .dboxcontent').show();
                    }, function() {
                        var activeID = $(this).attr('id');
                        $('#' + activeID + ' .dboxcontent').remove();
                    }
                );