Grid Hover

HTML

<div id="theone">
<div class="column1">
    <div class="grid"></div>
    <div class="grid s1"></div>
    <div class="grid"></div>
</div>
<div class="column2">
    <div class="grid-long s1"></div>
    <div class="grid"></div>
</div>
</div>

<div id="thetwo">
<div class="column3">
    <div class="grid"></div>
    <div class="grid s2"></div>
    <div class="grid"></div>
</div>
<div class="column4">
    <div class="grid-long s2"></div>
    <div class="grid"></div>
</div>
</div>

<div id="thethree">
<div class="column5">
    <div class="grid"></div>
    <div class="grid s3"></div>
    <div class="grid"></div>
</div>
<div class="column6">
    <div class="grid-long s3"></div>
    <div class="grid"></div>
</div>
</div>

CSS

.column1,
.column2,
.column3,
.column4,
.column5,
.column6
{float:left; width:50px; margin:10px;}

.grid {width:50px; height:50px; margin:10px; background:#000;}
.grid-long {width:50px; height:100px; margin:10px; background:#000;}

.s1, .s2, .s3 {background:#333; cursor:pointer;}
.visible {background:#ccc;}

JavaScript

$("#theone a").hover(function (e) {
    // do something
    $(e.currentTarget).find(".column1 > .s1, .column2 > .s1").toggleClass("visible");
   
});

$("#thetwo a").hover(function (e) {
    // do something
    $(e.currentTarget).find(".column3 > .s2, .column4 > .s2").toggleClass("visible");
});

$("#thethree a").hover(function (e) {
    // do something
    $(e.currentTarget).find(".column5 > .s3, .column6 > .s3").toggleClass("visible");
});