Disciplines hover menu

by orrinward

HTML

<div id="thumbs">
    <div class="print photo branding module"></div>
    <div class="print module"></div>
    <div class="branding module"></div>
    <div class="photo branding module"></div>
</div>
<div style="clear:both"></div>
<div id="menu">
    <ul>
        <li class="print">Print</li>
        <li class="photo">Photo</li>
        <li class="branding">Print</li>    
    </ul>
</div>

CSS

#thumbs .module{width:100px;height:100px;margin:10px;background:#333; float:left;}

.highlight{opacity:0.5;background:#ff0;}

JavaScript

$('#thumbs .print').hover(
    function(){
        $('#menu .print').addClass('highlight');
    },
    function(){
        $('#menu .print').removeClass('highlight');
    }
);
$('#thumbs .branding').hover(
    function(){
        $('#menu .branding').addClass('highlight');
    },
    function(){
        $('#menu .branding').removeClass('highlight');
    }
);
$('#thumbs .photo').hover(
    function(){
        $('#menu .photo').addClass('highlight');
    },
    function(){
        $('#menu .photo').removeClass('highlight');
    }
);

$('#menu .print').hover(
    function(){
        $('#thumbs .print').addClass('highlight');
    },
    function(){
        $('#thumbs .print').removeClass('highlight');
    }
);
$('#menu .branding').hover(
    function(){
        $('#thumbs .branding').addClass('highlight');
    },
    function(){
        $('#thumbs .branding').removeClass('highlight');
    }
);
$('#menu .photo').hover(
    function(){
        $('#thumbs .photo').addClass('highlight');
    },
    function(){
        $('#thumbs .photo').removeClass('highlight');
    }
);