I'm looking for a way to make an entire div clickable on this page: http://tinyurl.com/2ektm28 . Scroll down through the menu categories and you'll see a background change (for now) on the divs. And right now, the link is only on the h2. But I want the whole div to be clickable.
I found this on CSS-Tricks, but it's not working for me. http://css-tricks.com/snippets/jquery/make-entire-div-clickable/ What am I missing?
Thank you so much for an informative answer. I appreciate it! It's working now.
Since wrapping the entire DIV in the anchor is invalid, you're left with some options that all have drawbacks:
Make your markup not as good and convert the DIV to anchor and then use SPANs for everything inside.
Apply an onclick event to the DIV and change your CSS to include this:
This means it'll "sort of" look like a link, but the status bar won't show the link address when you hover over it (except for hovering over the h3 anchor).
Absolutely-position a link over the DIV so it covers it entirely. This has the drawback that the text underneath won't be selectable, but is normally a bit difficult with ordinary links anyway.
As for that jQuery on css-tricks, you're missing something that they don't mention. That code has to run after the DOM has loaded, so you need to use jQuery's special "DOM loaded" method: