Change Bg

by Apple Ilagan

HTML

<div id="search1"><a href="#" class="thelink" target="1">SEARCH THIS SITE</a></div>
<div id="search2"><a href="#" class="thelink" target="2">SEARCH FOR AN AGENT</a></div>
<div id="search3"><a href="#" class="thelink" target="3">SEARCH FOR PROPERTIES</a></div>
<div class="searchc showme" id="searchc1"></div>
<div class="searchc" id="searchc2"></div>
<div class="searchc" id="searchc3"></div>

CSS

#searchc1 {width:25%; position:absolute; height:25%; top:0; z-index:-1;}
#searchc1 {width:25%; position:absolute; height:25%; bottom:0; z-index:-1;}

#searchc1 {background:#333;}
#searchc2 {background:red;}
#searchc3 {background:green;}
.thelink{position:relative; z-index:9999;}

JavaScript

jQuery(function () {
    jQuery('.thelink').hover(function (e) {
        var index = $(this).parent().index(),
            newTarget = jQuery('.searchc').eq(index);
        jQuery('.searchc').not(newTarget).fadeOut('fast')
        newTarget.css("zIndex", "9").delay('fast').fadeIn('fast')
        jQuery(".thelink").removeClass("activebtn");
        jQuery(e.currentTarget).addClass("activebtn");
        return false;
    })
});