JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blog_highlight">

    <ul class="calendar">
        <li><a href="#">Nov</a></li>
        <li><a href="#">25</a></li>
    </ul>
    
    
    <ul class="commentaries">
        <li><a href="#">16</a></li>
    </ul>
    
    
    <div class="entry_info">
    
        <div>
            <a href="#"><img src="images/blog_pix_1.jpg" width="230" height="210" alt="" /></a>
        </div>
        <h2>Title</h2>
        
        <p>Text</p>
        
        <p><a href="#" class="read_more">Leer mas</a></p>
        
    </div><!-- end entry info -->

</div><!-- end blog highlight -->

CSS

.entry_info { border: 1px solid red; }
.more_jquery { border: 1px solid blue; } 
.bubble_hover { border: 1px solid green; }

JavaScript

$('ul.calendar').hover (
    function () {    
        $(this).nextAll('.entry_info').addClass('hover_border');
        $(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
        $(this).next('ul.commentaries').addClass('bubble_hover');        
    },
    
    function () {    
        $(this).nextAll('div.entry_info').removeClass('hover_border');
        $(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
        $(this).next('ul.commentaries').removeClass('bubble_hover');
});