JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<link rel="stylesheet" href="///ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div id="nav">
<ul>
<li><a href="#" class="link1">link1</a></li>
<li><a href="#" class="link2">link2</a></li>

</ul>
</div>

            <div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

        </div>

CSS

.img1over{
    color: #f00
}


.img2over{
    color: green
}

JavaScript

$("a.link1").hover(function() {
  $(".img1").toggleClass("img1over");
});
$("a.link2").hover(function() {
  $(".img2").toggleClass("img2over");
});