JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainWrapp">
    
    <div id="post-1" class="post">
        <div class="title">Title 1</div>  
        <div class="thumb">Thumb 1</div>          
    </div><!-- end of #post-1 -->
    
    <div id="post-1" class="post">
        <div class="title">Title 2</div>  
        <div class="thumb">Thumb 2</div>          
    </div><!-- end of #post-2 -->
    
    <div id="post-1" class="post">
        <div class="title">Title 3</div>  
        <div class="thumb">Thumb 3</div>          
    </div><!-- end of #post-3 -->
    
</div><!-- end of #mainWrapp -->

CSS

.mainWrapp{
    float:left;
    background:#efefef;
    width:600px;
    height:325px;
    margin:30px;
    border:1px solid grey;
}

.post{
    float:left;
    margin:10px;
    width:555px;
    height:65px;
    border:1px dashed grey;
    padding:10px;
}

.title{
    background:red;
    padding:5px;
}

.thumb{
    background:red;
    padding:5px;
    margin-top:5px;
}

.titleHover{
    background:blue;
}

.thumbHover{
    background:blue;
}

JavaScript

$(document).ready(function(){
    
   // ********* for titles
    $(".post div").mouseover(function(){  
        $(this).closest('.post').find('div').toggleClass('thumbHover');
    }).mouseout(function(){    
        $(this).closest('.post').find('div').toggleClass('thumbHover');
    });
    
});