JSFiddle - React, Tailwind, and code Playground
HTML
<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>
CSS
.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}
JavaScript
$(document).on({
mouseenter: function() {
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";
$(this).css("background-color",new_rgba_str );
},
mouseleave: function(){
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";
$(this).css("background-color",new_rgba_str );
}
},'.highlighted');