JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id="wrapper">
    <div class="box trigger"><p>box</p></div>
    <div class="box trigger"><p>box</p></div>
    <div class="box trigger"><p>box</p></div>
    <div class="box trigger"><p>box</p></div>
    <div class="box trigger"><p>box</p></div>
    <div class="box trigger"><p>box</p></div>
</div>

CSS

#wrapper { width:306px; height:204px; }

.box {
    width:100px;
    height:100px;
    background-color:#aaa;
    border:1px solid #333;
    float:left;
    color:rgb(255,255,255);
}

.box p { padding:40px 0 0 40px; }

JavaScript

$('.trigger').mouseenter(toggleText);

function toggleText() {
    var curdecoration = $('.box p').css('text-decoration');
    console.log("in toggle, decoration = "+curdecoration);
    if(curdecoration == 'underline') $('.box p').css('text-decoration','none');
    else $('.box p').css('text-decoration','underline');
}