JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="id1" class="item"><a href="#">DIV1</a>

</div>
<div id="id2" class="item"><a href="#">DIV2</a>

</div>
<div id="id3" class="item"><a href="#">DIV3</a>

</div>
<div id="rightDiv"> <a id="id1match" class="region"> </a>
 <a id="id2match" class="region"> </a>
 <a id="id3match" class="region"> </a>

    <div id="fakeDiv1" class="fake"><a href="#">DIV1</a>

    </div>
    <div id="fakeDiv2" class="fake"><a href="#">DIV2</a>

    </div>
    <div id="fakeDiv3" class="fake"><a href="#">DIV3</a>

    </div>
</div>

CSS

/* style of left side */
 .item {
    width:100px
}
.item a, .fake a {
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    display:block;
    text-decoration:none
}
.item a:hover {
    color:#fff!important
}
#id1 a {
    color:red
}
#id1 a:hover, #fakeDiv1 a {
    background:red
}
#id2 a {
    color:blue
}
#id2 a:hover, #fakeDiv2 a {
    background:blue
}
#id3 a {
    color:green
}
#id3 a:hover, #fakeDiv3 a {
    background:green
}
/*right side div and links styling*/
 #rightDiv {
    background:yellow;
    position:absolute;
    left:100px;
    top:0;
    height:300px;
    width:300px
}
#rightDiv .region {
    background:grey;
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
    cursor:pointer
}
/*right side region links positioning*/
 #rightDiv a#id1match {
    left:60px;
    top:10px
}
#rightDiv a#id2match {
    left:180px;
    top:30px
}
#rightDiv a#id3match {
    left:140px;
    top:180px
}
/*left link hover right side change*/
 #id1:hover ~ #rightDiv a#id1match {
    background:red
}
#id2:hover ~ #rightDiv a#id2match {
    background:blue
}
#id3:hover ~ #rightDiv a#id3match {
    background:green
}
/*right link hover left side change*/
 .fake {
    position:absolute;
    left:-9999px;
    top:0
}
.fake a {
    color:#fff
}
#id1match:hover {
    background:red
}
#id1match:hover ~ #fakeDiv1 {
    left:-100px;
    top:0
}
#id2match:hover {
    background:blue
}
#id2match:hover ~ #fakeDiv2 {
    left:-100px;
    top:100px
}
#id3match:hover {
    background:green
}
#id3match:hover ~ #fakeDiv3 {
    left:-100px;
    top:200px
}

JavaScript

$('.item,.region').hover(function () {
    $('.item,.region').not(this).not($("#" + $(this).attr('id') + 'match')).fadeTo("fast", .5);
}, function () {
    $('.item,.region').fadeTo("fast", 1);
});