JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="tratoresList">
        <h3>A</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
    <li class="tratoresList">
        <h3>B</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
    <li class="tratoresList">
        <h3>C</h3>
        <p>Blá <strong>blá</strong> blá</p>
    </li>
</ul>

CSS

.tratoresList h3{
    font-family: "opensans-light-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
    text-align: center;
}
.tratoresList strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
}
.tratoresList .realce {
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

JavaScript

$(".tratoresList strong, .tratoresList h3").hover(
    function() { 
        $(this)
            .closest(".tratoresList")
            .find("strong, h3")
            .addClass("realce");
    },
    function() { 
        $(this)
            .closest(".tratoresList")
            .find("strong, h3")
            .removeClass("realce");
    }
);