Testing this thing out

by Rob Cameron

HTML

<div id="box">
    <h1>Hello, World!</h1>
    <h2 style="display:none">"Hello, World!" is generally used in introductory programming texts as the most simple program possible in the given language.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>

CSS

#box {
    font-family: sans-serif;
}
#box h1 {
    border-bottom: 1px dashed #cccccc;
    cursor: help;
    display: inline;
    font-size: 200%;
}
#box h2 {
    background-color: #333333;
    color: #ffffff;
    width: 200px;
    padding: 1em;
    margin: -1em 0 0 12em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    position: absolute;
}
#box p {
    margin: 1em 0;
}

JavaScript

$('#box h1').mouseover(function() {
    $(this).siblings('h2').fadeIn(200);
}).mouseout(function() {
    $(this).siblings('h2').fadeOut(200);
});