JSFiddle - React, Tailwind, and code Playground

by Oscar Jara

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
    $(".title").mouseover(function(){    
        $(this).toggleClass("titleHover");
        $(".thumb", this).toggleClass("thumbHover");
    });

     $(".title").mouseout(function(){    
        $(this).toggleClass("titleHover");
        $(".thumb", this).toggleClass("thumbHover");
    });

    // ********* for thumbs
     $(".thumb").mouseover(function(){    
        $(this).toggleClass("titleHover");
        $(".title", this).toggleClass("thumbHover");
    });

     $(".thumb").mouseout(function(){    
        $(this).toggleClass("titleHover");
        $(".title", this).toggleClass("thumbHover");
    });
});