JSFiddle - React, Tailwind, and code Playground

by gchoken

HTML

<table width="200" border="1" class="table">
 <tr>
   <td>a</td>
   <td>a</td>
   <td rowspan="3" class="single">d</td>
 </tr>
 <tr>
   <td>b</td>
   <td>b</td>
 </tr>
 <tr>
   <td>c</td>
   <td>c</td>
 </tr>
</table>
<hr/>
<table width="200" border="1" class="table">
 <tr>
   <td>a</td>
   <td>a</td>
   <td rowspan="3" class="single">d</td>
 </tr>
 <tr>
   <td>b</td>
   <td>b</td>
 </tr>
 <tr>
   <td>c</td>
   <td>c</td>
 </tr>
</table>

CSS

.hoverclass{ color: red;}

JavaScript

$(function(){

    var s = 0;
   $('.single').hover(function(){
        $(this).addClass('hoverclass');
       s=1
   },function(){
    $(this).removeClass('hoverclass');
       s = 0
   });
    
    $('tr').hover(function(){
   
       if(s==0){
        $(this).children('td').slice(0, 2).addClass("hoverclass");
        }
    },function(){
    
     $(this).children('td').slice(0, 2).removeClass("hoverclass");
    });
    
    

      
    


    
    
    
});