рев2

by blancod

HTML

<a class="a" href="#" >raz</a>
<a class="b" href="#" >dva</a>

<div id="c">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

CSS

a.a {
    border-style:solid;
    border-color:#aff;
    border-width:2px 5px 30px 22px;
    opacity:0.7;
}
a.b {
    border-style:solid;
    border-color:#aff;
    opacity:0.7;
}
div.a{
    width:30px;
    height:44px;
    background-color:#afa;
}
div.b{
    width:25px;
    background-color:#ffa;
}
#c{
    width:100px;
    height:100px;
    background-color:#aaa;

JavaScript

function setWidth(w, h, c) {
    w = (w + 5) + "px ";
    h = (h - 12) + "px ";
    $("a." + c).css({
        borderWidth: h + w
    }).text(c);
}
$("div").mouseover(function() {
    setWidth($(this).width(), $(this).height(), $(this).attr("class"));
});