jquery - 单击 div 上的任意位置而不是直接单击 Link

Question

在下面代码所示的场景中，如何允许用户单击 div.post 上的任意位置，而不是精确单击实际的 a元素？

<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>

---

我还需要在鼠标悬停时突出显示完整的 div.post，我目前正在使用:

[编辑:感谢您的回答，我已将以下内容替换为 CSS 而不是 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");      
    }
);

---

编辑:解决方案将首选:

• 使用 CSS 而不是 jQuery
• 验证为 XHTML 1.0 严格
• 不要将 a 包裹在 div
• 不要包含空的a

到目前为止，我认为 ArVan 的解决方案是最好的(请参阅我的评论)。

Answer 1

为什么你需要 DIV。您只需相应地设置 < a > 标签的样式即可。根据需要向类添加样式。摆脱内联样式!

<div class="post">

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

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

</div>