在div上单击任意位置，而不是直接在链接上单击

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 Strict
• 不包装的a绕div
• 不涉及一个空a

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

Answer 1

尝试在div上添加onclick侦听器。 您可以在html中执行此操作，例如<div class="post" style="padding: 20px; background-color: transparent;" onclick="location.href='http://...'"> <div class="post" style="padding: 20px; background-color: transparent;" onclick="location.href='http://...'"> 。

或者您可以使用jQuery这样来做到这一点：

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

Answer 2

为什么您需要所有DIV。 您可以简单地相应地设置<a>标签的样式。 根据需要向<a>类添加样式。 摆脱内联样式！

<div class="post">

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

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

</div>

Answer 3

当然，您也可以使a元素填充整个div，并将background设置为a元素-因此，您只需要js作为.post background：

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

Answer 4

您不想用<a>标签包装<div>标签的唯一原因是，您不应该将块级元素放入内联元素中。 如果将包含的<a>标记设置为块级元素，则没有理由不希望使用<a>标记包装<div> 。

另外，请记住，你可以把<a>内标签<a>标签。

<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

您可以选择保留还是删除链接，但是您所要做的就是在div和window.location上使用jQuery click函数。

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

超级容易！

Answer 6

继承人

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

Answer 7

或者，可以通过将链接放置在整个div.post元素上并使用CSS悬停效果来完全避免使用Javascript（在可能的情况下，我总是倾向于使用Javascript）：

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

至少应该使用CSS来更改悬停时的背景颜色，而不是使用Javascript。

编辑：将小提琴更新为在a元素中包括一个空span ，如使div进入链接 。

最新编辑：更新了小提琴以在此处使用XHTML 1.0 Strict doctype，该文档类型既可以正常工作，也可以成功验证 。

Answer 8

如果您使用的是HTML5，则可以给锚标记添加一些子标记，然后相应地使用CSS。 这需要最少的css和标记，根本不需要JS。

看看这个例子： http : //jsfiddle.net/DavidVII/6ErgJ/

同样，这可以使用HTML5进行验证。 当然，严格来说这是不合法的。

Answer 9

您可以使用CSS来完成。 这是@ptriek和@qwertymk解决方案的混合。

演示

请记住，如果您要浮动的东西，则必须clear: both; 之后。 尝试删除clearfix ，看看它有什么不同。

更新：

为了获得更多的荣誉，我将jQuery悬停在CSS上。 我认为效果很好。 上面的演示链接已更新。

更新2：

这是一个折衷方案。 一个小的jQuery用于让锚点进入div 内部 ，而不是围绕它。 所有这些都通过XHTML 1.0 Strict验证，并且可以正常工作。 我还添加了cursor: pointer; 使它看起来像一个链接（您通常会看到链接的手形光标），即使它是一个div。

XHTML看起来像这样，

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

您仍然可以突出显示div中的任何文本，然后右键单击图像（复制或另存为）。

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