JSFiddle - React, Tailwind, and code Playground

HTML

blinker
<div class="learnmore">
    Learn more
</div>
<div class="learnmore">
    Learn more 2
</div>
<div class="learnmore">
    Learn more 3
</div>
<hr />
keep opacity until mouseout
<div class="learnmore2">
    Learn more
</div>
<div class="learnmore2">
    Learn more 2
</div>
<div class="learnmore2">
    Learn more 3
</div>

CSS

.learnmore, .learnmore2{
    border:1px solid #000;
    background-color:#ccc;  
}

JavaScript

$(document).ready(function() {
    $('.learnmore').bind('mouseenter', (function() {
        // $(this) refer to current mouseover object
        // stop(true,true) will stop the animation from repeating in que
        $(this).stop(true, true).animate({
            // opacity will make fade
            opacity: 0.3
            // 300 is the delay time
            // start fading back to normal with same process
        }, 300, function() {
            $(this).animate({
                opacity: 1
            }, 100)
        });
    }));

    $('.learnmore2').mouseenter(function() {
        $(this).stop(true, true).animate({
            opacity: 0.3,
        }, 300).mouseleave(function() {
            $(this).animate({
                opacity: 1
            }, 100)
        });
    });
});