JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pane" style="display: block;">
    <ul class="recent-posts">            
            <li class="recent-post">
                <h3><a class="title" href="http://xxxx">Titre 1</a></h3>
                <p class="recent-meta"></p>
                <p>contenu entre les deux</p>
                <div class="excerpt"><a href="http://xxxx">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et <span class="recent-read-more">...</span></a></div>
            </li>
            <li class="recent-post">
                <h3><a class="title" href="http://xxxx">Titre 2</a></h3>
                <p class="recent-meta"></p>
                <p>contenu entre les deux</p>
                <div class="excerpt"><a href="http://xxxx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat <span class="recent-read-more">...</span></a></div>
            </li>            
    </ul>
</div>

CSS

a { text-decoration: none; color: inherit; }

.recent-post h3:hover,
.recent-post h3.hover
{
    background-color:cyan;
    border: 3px solid yellow;
}

.recent-post .excerpt:hover,
.recent-post h3:hover ~ .excerpt {
    background-color:red;
    border: 3px solid green;
}

JavaScript

var contenus = document.querySelectorAll(".recent-post .excerpt");
Array.prototype.slice.call(contenus).forEach(function(elm){
    var title = elm.parentElement.firstElementChild;
    elm.onmouseover = function(){ title.classList.add("hover"); };
    elm.onmouseout = function(){ title.classList.remove("hover"); };
});