JSFiddle - React, Tailwind, and code Playground

by jeremykenedy

HTML

<h1 id="worksOffID">Hello !</h1>


<h1>Word !</h1>

CSS

body {
    background:#333;
}
h1 {
    font-size:50px;
    cursor:default;
    color:#fff;
}
.hover {
    color:blue;
}
.hover2 {
    font-size:60px;
}
.hover3 {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.hover4 {
    text-shadow:1px 1px 10px #ff0000;
}
.hover5 {
    opacity:.5;
}

JavaScript

$("h1").hover(function () {
    var elemtId = $(this).attr('id');
    var header = $('#' + elemtId);
    header.toggleClass("hover"),
    header.toggleClass('hover2'),
    header.addClass('hover3'),
    header.toggleClass('hover4'),
    header.toggleClass('hover5');
    //alert(elemtId);
    //$(this).toggleClass( "hover" );  
});

$("h1").hover(function () {
    var header = $('h1');
    header.toggleClass("hover"),
    header.toggleClass('hover2'),
    header.addClass('hover3'),
    header.toggleClass('hover4'),
    header.toggleClass('hover5');
    //alert(elemtId);
    //$(this).toggleClass( "hover" );  
});