Click Chaser lab

by Ryan Morris

HTML

<div id="left"> 
    <a href="#">Click me</a>
</div>
<div id="right">
    <li>No, click me!</li>
</div>

CSS

body {
    font-family:arial;
    font-size:.5em;
    text-transform:uppercase;
}
a {
    text-decoration:none;
}
#left {
    border:1px solid #ccc;
    background-color:#ececec;
    font-weight:bold;
    padding:10px;
    text-align:center;
    width:50px;
    height:20px;
    border-radius:5px;
}
#right {
    position:absolute;
    bottom:0;
    right:0;
    width:60px;
    height:20px;
    padding:10px;
    text-align:center;
    font-weight:bold;
    background-color:#f90;
    border:2px solid #000;
    border-radius:5px;
}
li {
    list-style:none;
}

JavaScript

// Cut your teeth on some basic event handling in jQuery
//
// Part 1
//
// When a user mouses over the #left a element
// It should hide itself (the containing div)
// And it should reveal the #right element
//
// Part 2
// When a user mouses over the #right li element
// It should hide itself (the containing div)
// And it should reveal the #left element

var $left = $('#left');
var $right = $('#right');

$left.on('mouseover', function(e) {
  $left.hide();
  $right.show();
});

$right.on('mouseover', function(e) {
  $right.hide();
  $left.show();
});