JSFiddle - React, Tailwind, and code Playground

by liho1eye

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
    
    <input type="hidden" id="HiddenMediaID" value="450">
    
    <article class="Article">
        Article 1                
        <input type="hidden" class="LatestMediaID" value="200" />
    </article>
    
    <article class="Article">
        Article 2
        <input type="hidden" class="LatestMediaID" value="450" />
    </article>
    
    <article class="Article">
        Article 3
        <input type="hidden" class="LatestMediaID" value="700" />
    </article>
    
</body>
</html>

CSS

.Article {
    width: 150px;
    height: 35px;
    line-height: 35px;
    margin: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    text-align: center;    
}

.selected, .hover { background-color:#F0F8FF;}

JavaScript

$(document).on('mouseenter mouseleave', '.Article', function(e) {
    $(this).toggleClass("hover", e.type == "mouseenter");
});

// set selected item
// usually this would be done by server side code, but leave it in for the sake of example
var hiddenId = $("#HiddenMediaID").val();
$(".LatestMediaID").filter(function() { return $(this).val() == hiddenId; }).parent().addClass("selected");