div+css 页面设计新样式

这个效果是我研究了好多项目后,结合我的客户的类型和要求,设计了一套简介明了,大方又不落俗套的鼠标样式.
css代码:

.mouseToLittleHand {
    cursor: pointer;
}
.clickToBeBlue {
    color: #4482E0;
    border-bottom: solid;
}

不同的div恒排成一排,没有加边框.当鼠标放上div1去,变小手.
点击,变色,并加一条蓝色的下划线.
移开,变色还在,小手形状变为auto(即消失).
当点击别的div,假如为div2,那么div1的变色消失,恢复本来样式;而div2变色,并加一条蓝色的下划线.

js代码:

$("#gaikuang").mouseover(function() {
        $("#gaikuang").addClass("mouseToLittleHand");
    });
    $("#gaikuang").click(function() {
        $("#gaikuangDiv").show();
        $("#gprsYwxqDiv").hide();
        $("#yyYwxqDiv").hide();
        $("#dxYwxqDiv").hide();
        $("#internetYwxqDiv").hide();
        $("#vpnYwxqDiv").hide();
        $("#gprsYwxq").removeClass("clickToBeBlue");
        $("#yyYwxq").removeClass("clickToBeBlue");
        $("#dxYwxq").removeClass("clickToBeBlue");
        $("#internetYwxq").removeClass("clickToBeBlue");
        $("#vpnYwxq").removeClass("clickToBeBlue");
        $("#gaikuang").addClass("clickToBeBlue");
    });

相应的,点击div2时,js代码:

$("#gprsYwxq").click(function() {
        $("#gaikuangDiv").hide();
        $("#gprsYwxqDiv").show();
        $("#yyYwxqDiv").hide();
        $("#dxYwxqDiv").hide();
        $("#internetYwxqDiv").hide();
        $("#vpnYwxqDiv").hide();
        $("#gaikuang").removeClass("clickToBeBlue");
        $("#yyYwxq").removeClass("clickToBeBlue");
        $("#dxYwxq").removeClass("clickToBeBlue");
        $("#internetYwxq").removeClass("clickToBeBlue");
        $("#vpnYwxq").removeClass("clickToBeBlue");
        $("#gprsYwxq").addClass("clickToBeBlue");
    });

这样便设计哦了!