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 .menuitem').not('.print').stop().fadeTo(500,0.5);
    },
    function(){
        $('#menu .menuitem').not('.print').stop().fadeTo(500,1);
    }
);
$('#thumbs .branding').hover(
    function(){
        $('#menu .menuitem').not('.branding').stop().fadeTo(500,0.5);
    },
    function(){
        $('#menu .menuitem').not('.branding').stop().fadeTo(500,1);
    }
);
$('#thumbs .photo').hover(
    function(){
        $('#menu .menuitem').not('.photo').stop().fadeTo(500,0.5);
    },
    function(){
        $('#menu .menuitem').not('.photo').stop().fadeTo(500,1);
    }
);

$('#menu .print').hover(
    function(){
        $('#thumbs .module').not('.print').stop().fadeTo(500,0.5);
    },
    function(){
        $('#thumbs .module').not('.print').stop().fadeTo(500,1);
    }
);
$('#menu .branding').hover(
    function(){
        $('#thumbs .module').not('.branding').stop().fadeTo(500,0.5);
    },
    function(){
        $('#thumbs .module').not('.branding').stop().fadeTo(500,1);
    }
);
$('#menu .photo').hover(
    function(){
        $('#thumbs .module').not('.photo').stop().fadeTo(500,0.5);
    },
    function(){
        $('#thumbs .module').not('.photo').stop().fadeTo(500,1);
    }
);