Make a div clickable
We all dislike that links are so small, and hard to click. So of course we want to make the clickable areas bigger. Some would think that doing this with some CSS on the a-tag would be a good way, but then you can’t have block level elements inside it (you’ll get a validation error if you try to put headings or paragraph tags inside of links). So what’s a more general solution?
var block = $(".teaser");
window.location = $(this).find("a:first").attr("href")
window.status = $(this).find("a:first").attr("href")
window.status = ""
CSS for showing that the div actually is clickable:
A clickable div demo is of course available.
How it works
- When the div (or other tag, you choose) is clicked, find the first anchor tag, get it’s href attribute, and go there. Relying on an actual link means you always have a fallback, so no cheating.
- The changing background color on hover is done with CSS, which I think is fair, considering the small percentage of users using IE6. Changing background color isn’t a must feature.
- Lastly, since we’re simulating a link here, it should show where the link is going. I’ve done this by setting the statusbar to the link location on hover, something that’s useful when it works (users can disable this in some browsers).