[jQuery] Make List Element Clickable
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>
Some Text
<a href='http://www.somelink.com'>Click Here</a>
</li>
...more list elements with same format as above
</ul>
</div>