js hover visibility (using show & hide)

by Roberto Apasajja

HTML

<div id="one">one
    <div id="two">two</div>
</div>
<div id="first">first
    <div id="second">second</div>
</div>
<div id="aaa">aaa
    <div id="bbb">bbb</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, #aaa{
    display:none
}

JavaScript

$("#two").hover(function() {
    $('#first').show();
}, function() {
    $('#first').hide();
});