JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<!-- add a class to each of the boxes (link in this case) -->
<div class="link">
    <a href="camps.html">Camps</a>
</div>
<div class="link">
    <a href="team.html">Team</a>
</div>
<div class="link">
    <a href="events.html">Events</a>
</div>

CSS

/* cool css3 transitions
won't work in old browsers
until the spec is finalized, each
browser does their own version so you have to do 
one for chrome/safari (webkit) another for 
firefox (moz), IE (ms), opera (o) and the last one
is the recently published official spec, so any browser
moving forward should get it. */

.link {
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.faded {
    opacity:.2;
}

JavaScript

// you have to use document ready, or you're trying
// to attach an event to an element that doesn't exist yet.
$(function() {
    
    $('.link').hover(
        
        // on mouse over, find all the .slides,
        // except this one
        // and add the faded class
        function() {
            $(this).siblings().addClass('faded');
        },
        
        // on mouse off, find all the slides
        // and remove the faded class.
        function() {
            $('.link').removeClass('faded');
        }
    );
    
});