Disciplines hover menu

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

function classList(elem) {
    return $(elem).attr('class').split(/\s+/);
}

$("#thumbs div").mouseenter(function(){
$.each( classList(this), function(index, item){
    $("#menu ."+item).addClass("highlight");
});
});

$("#thumbs div").mouseleave(function(){
$.each( classList(this), function(index, item){
    $("#menu ."+item).removeClass("highlight");
});
});

$("#menu ul li").mouseenter(function(){
$.each( classList(this), function(index, item){
    $("#thumbs ."+item).addClass("highlight");
});
});

$("#menu ul li").mouseleave(function(){
$.each( classList(this), function(index, item){
    $("#thumbs ."+item).removeClass("highlight");
});
});