Click anywhere on div instead of directly on Link

Question

In the scenario shown in the code below, how can I allow the user to click anywhere on div.post, instead of precisely on one of the the actual a elements?

<div class="post" style="padding: 20px; background-color: transparent;">

    <div class="thumbnail" style="float: left; background-color: #ccc;">    
        <a href="http://...">
            <img src="http://...">
        </a>
    </div>

    <div class="title" style="float: right;">
        <a href="http://...">title</a>
    </div>

</div>

---

I also need to highlight the complete div.post on mouseover, which I currently do using:

[EDIT: Thx to your answers, I have replaced the following by CSS instead of the jQuery]

$("div.post").hover(

    function() {
        $(this).css("background-color", "#333");
        $(this).find("div.thumbnail").css("background-color", "#333");
    },

    function() {
        $(this).css("background-color", "transparent");
        $(this).find("div.thumbnail").css("background-color", "#ccc");      
    }
);

---

EDIT: Solutions will be preferred that:

• use CSS instead of jQuery
• validate as XHTML 1.0 Strict
• do not wrap an a around a div
• do not involve an empty a

So far, I consider ArVan's solution to be the best (see my comment there).

Answer 1

Try adding an onclick listener on the div. You can do this in the html like this <div class="post" style="padding: 20px; background-color: transparent;" onclick="location.href='http://...'">.

Or you can do it with jQuery like this:

$("div.post").click(function(){
   window.location.href = "http://...";
});

Answer 2

Why do you need to have the DIVs at all. You could simply style the < a > tags accordingly. Add styles to < a > classes as you desire. Get rid of inline styles!

<div class="post">

        <a class="thumbnail" href="http://...">
            <img src="http://...">
        </a>

        <a class="title" href="http://...">title</a>

</div>

Answer 3

You could of course also make the a elements fill up the entire div it's in - and set the background to the a element - so you'll only need js for .post background:

a {
    background:transparent;
    display:block;
    height:100%; /* .post will need a fixed height */
    width:100%;
}
a:hover {
    background:#333;
}

Answer 4

The only reason that you wouldn't want to wrap a <div> tag with an <a> tag is because you're not supposed to put block-level elements inside inline elements. If you set your containing <a> tag to be a block-level element, then there is no reason why you wouldn't want to wrap the <div> with an <a> tag.

Also, keep in mind that you can place <a> tags within <a> tags.

<a class="post" href="#" style="padding: 20px;">
    <div class="thumbnail" style="float: left; background-color: #ccc;">    
        <a href="http://...">
            <img src="http://...">
        </a>
    </div>
    <div class="title" style="float: right;">
        <a href="http://...">title</a>
    </div>
</a>

Answer 5

You can choose to keep or remove the links, but all you have to do is use a jQuery click function on the div, and window.location.

$("div.post").click(function(){
    window.location.href = "myHrefHere.ext";
});

Super easy!

Answer 6

Heres a DEMO

$('div > a').each(function() {
    var href = this.href;
    $(this).parent().click(function() { location.href = href; });
});

Answer 7

If you're using HTML5 you can give the anchor tag some children and use CSS accordingly. This requires the least amount of css and markup and no JS at all.

Check out this example: http://jsfiddle.net/DavidVII/6ErgJ/

also, this validates using HTML5. This of course isn't legal in strict.

Answer 8

You can do it just with CSS. This is a mix of @ptriek's and @qwertymk's solutions.

demo

Remember, if you're going to be floating stuff, you have to clear: both; after it. Try removing the clearfix, and see how it's different.

Update:

For a little extra credit, I replaced the jQuery for hovering with CSS. I think it works pretty well. The demo link above has been updated.

Update 2:

Here's a bit of a compromise. A little jQuery is used to let the anchor go inside the div, instead of around it. It all validates as XHTML 1.0 Strict and works fine. I also added cursor: pointer; to make it look like a link (you get the usual hand cursor for links) even though it's a div.

The XHTML looks like this,

<div class="post" style="padding: 20px;">
    <a href="http://..." class="placehold" />
    <!-- content goes here -->
</div>

You can still highlight any text inside the div, and right click images (to copy or save-as).

http://jsfiddle.net/HXdA5/4/

Answer 9

Or, you could avoid using Javascript at all (which I always prefer when possible), by positioning your link over your entire div.post element, and using CSS hover effects:

http://jsfiddle.net/jblasco/WXugG/14/

At the very least you should use CSS for changing the background color on hover, rather than Javascript.

EDIT: Updated the fiddle to include an empty span in the a element, as per Make a div into a link.

LATEST EDIT: Updated the fiddle to use the XHTML 1.0 Strict doctype here, which both works and validates successfully.