JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<table>
    <tr>
        <td>1.1.1<img class="img1" src="" alt="" width="50" height="50" /></td>
        <td>1.1.2<img class="img_h img1_1" src="" alt="" width="100" height="50" /></td>
    </tr>
    <tr>
        <td>1.2.1</td>
        <td>1.2.2</td>
    </tr>
</table>

<table>
    <tr>
        <td>2.1.1<img class="img_h img2_2" src="" alt="" width="100" height="50" /></td>
        <td>2.1.2<img class="img2" src="" alt="" width="50" height="50" /></td>
    </tr>
    <tr>
        <td>2.2.1</td><td>2.2.2</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    float: left;
    margin: 20px;
    width: 250px;
}
td {
    vertical-align: top;
    border: 1px solid;
}
img {
    border: 1px solid;
}
.img1, .img2 {
    background: silver;
    cursor: pointer;
}
.img1_1 {
    float: right;
    background: red;
    visibility: hidden;
}
.img2_2 {
    float: left;
    background: green;
    visibility: hidden;
}

JavaScript

$(window).load(function(){
    $('.img1, .img2').on({
        mouseenter: function() {
            $(this).closest('table').siblings('table').find('.img_h').css('visibility', 'visible');
        },
        mouseleave: function() {
            $(this).closest('table').siblings('table').find('.img_h').css('visibility', 'hidden');
        }
    });
});