JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div id="hover1" class="h dash" data-coupling="#content1">
    <h1>Hover1</h1>
    
</div>



<div class="w">
    <div id="hover2" class="h dot" data-coupling="#content2">
        <h1>Hover2</h1>
    </div>
    <div id="content2" class="c dot" data-coupling="#content2">
        <h2>Content2</h2>
    </div>
</div>


<div id="content1" class="c dash" data-coupling="#content1">
    <h2>Content1</h2>
    <a href="#">test</a>
</div>

CSS

@charset 'UTF-8';
body { font-family: Arial; }
.h {
    background: #c3d825;
    display: inline-block;
    float: left;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100px;
}
.w {
    position: relative;
    width: 400px;
}
.c {
    background: #c3d825;
    display: none;
    height: 100px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 32px;
    width: 202px;
}
.dash {border: 1px dashed #000;}
.dot {border: 1px dotted #000;}

JavaScript

$('.h, .c').hover(function() {
    $($(this).data('coupling')).toggle();
});