how to make whole div clickable?

Question

html-

<div class="hbg">
</div>

some menu items here

jquery for mouser over on menu items-

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('alt');
        $('.hbg').css('background-image', 'url(' + src + ')');
        $(this).find('hbg').attr('title', 'my tootip info');
        });     
    }

I am changing the background image of hbg div through jquery on mouse over of menu items(ul li).but i want to bind(href) that div to particular page also so that when user clicks anywhere on div it should redirect to that binded page.as it is redirecting on clickin on li items.
Is there any property in jquery where we can set the whole div as hyperlink?

Answer 1

Here is how you bind a click handler to the div:

$('div.hbg').click(function(e) {
  alert('The div was clicked!');
});

And you probably also want to style it to look clickable:

div.hbg { cursor: pointer; }

Answer 2

$('div.hbg').click(function(){location.href='http://www.google.com'});

You may want to change the mouse cursor so it looks clickable:

$('div.hbg').css('cursor','pointer');

Answer 3

try to give the div class a width and height and display: block;