JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<h2 id="logo1"><a href="#" class="logo">sample site</a></h2>
<h2 id="logo2"><a href="#" class="logo outmouse">サンプルサイト</a></h2>

CSS

.logo {
    display: block;
    width: 200px;
    height: 150px;
}
#logo1 a {
    background: #f00 url(http://placehold.it/200x300) no-repeat 0 0;
    color: #f00;
}
#logo1 a.onmouse {
    background: #f99 url(http://placehold.it/200x300) no-repeat 0 -150px;
    color: #00f;
}
#logo2 a {
    background :#0f0;
}
#logo2 .onmouse {
    background: #333;
}

JavaScript

$("#logo1 a").hover(function () {
    $(this).toggleClass("onmouse");
});

$("#logo2 a").hover(function () {
    $(this).switchClass("onmouse", 1000);
});