JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">Odkaz</a>
    </li>
</ul>

CSS

#list li a {
    display: block;
    color: #000;
}

#list li a:hover {
    color: #000;
}

JavaScript

$('#list li a').hover(function(ev){
    if (!$(this).find('.hover').length) {
        $('<span class="hover">').css({
            'background-color': 'red',
            'display': 'inline-block',
            'opacity': 0,
            'width': 293,
            'height': 170,
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'color:': 'black',
            
        }).appendTo($(this));
    }
    
    $(this).find('.hover').stop(true, true).animate({'opacity': 1}, 500);
}, function(ev){
    $(this).find('.hover').stop(true, true).animate({'opacity': 0}, 500);
});