JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><a>Hover On Me</a>

CSS

div{
    width:300px;
    height:300px;
    display:block;
    background:red; 
    opacity: 0.6
}

a{
    display:block;
    margin-top:20px;
    width:100px; 
    padding:5px;
    height:20px; border-radius:5px; 
    background:yellow;
}

JavaScript

$("a").hover(function(){
    $("div").animate({opacity:1},300);
}).mouseout(function(){
    $("div").animate({opacity:0.6},300);;
});