js hover visibility (using visibility)

by Roberto Apasajja

HTML

<div id="one">
    one
    <div id="two">
        two
    </div>
</div>

<div id="first">
    first
    <div id="second">
        second
    </div>
</div>

CSS

#one{
    width:200px;height:100px;
    background:pink
}

#two{
    width:100px;height:50px;
    background:purple
}

#first{
    width:200px;height:100px;
    background:green
}

#second{
    width:100px;height:50px;
    background:red
}

#aaa{
    width:200px;height:100px;
    background:yellow
}

#bbb{
    width:100px;height:50px;
    background:blue
}

/***************************************/
/* hovering                            */
/***************************************/

#first #second{
   visibility:hidden
}

JavaScript

$("#one").hover(function() {
    $("#second").css("visibility", "visible");
}, function() {
    $("#second").css("visibility", "hidden");
});