[jQuery] Make List Element Clickable

[Joe]

I would like to make the element list element clickable on the
hovering of the list element.  I can't seem to traverse the DOM and
grab the <a> tag's href value for the CURRENT list element that is
being hovered over.

$("#mainCol ul li").hover(function() {

$(this).addClass("highlight").css("cursor","pointer").click(function()
{
        //location.href= will be used when this works!
        var x = $(this).attr('href');
        alert(x);
        });
},function(){
 //On mouse out remove the class we have added on the mouse over
 $(this).removeClass("highlight");
 });


<div id='mainCol'>
<ul>
<li>

<h1>Header</h1>
<p>Some Text</p>
<p><a href='http://www.somelink.com'>Click Here</a></p>

</li>
...more list elements with same format as above
</ul>
</div>