JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

.danger { color: Red; font-size: larger; font-style: bold; }
.safety { color: Green; font-size: larger; font-style: bold; }

JavaScript

$('li').on('mouseover', function(e){
    if($(this).text() % 2 === 0) {
        $(this).addClass('danger');
    } else {
        $(this).addClass('safety');
    }
});