CSS event on one element, changing an other

http://stackoverflow.com/questions/12459301/css-event-on-one-element-changing-an-other/12459389#12459301

by thebabydino

HTML

<div id='two'>Hi, I'm <code>#two</code>!</div>
<div id='one'>I'm <code>#one</code>. Hover me!</div>

CSS

div { 
    background: crimson;
    max-width: 10em; 
    min-height: 5em;
    padding: .5em;
    margin: 1em auto;
}
#two {
    background: dodgerblue;
    opacity: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

JavaScript

$('#one').hover(function(){
    $('#two').css({'opacity': 1})},
function(){
    $('#two').css({'opacity': 0})
});