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').find('.img_h').css('visibility', 'visible');},mouseleave: function() {$(this).closest('table').find('.img_h').css('visibility', 'hidden');}});});