Heres a DEMO

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://...'">。

或者您可以使用jQuery这样做：

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

Answer 2

为什么你需要拥有DIV。你可以简单地设计＆lt; a＆gt;标签相应。添加样式到＆lt; a＆gt;你想要的课程。摆脱内联样式！

<div class="post">

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

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

</div>

Answer 3

你当然也可以让一个元素填满它所在的整个div - 并将背景设置为一个元素 - 所以你只需要.s背景的js：

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

Answer 4

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

另请注意，您可以在<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

Heres a DEMO

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

Answer 7

如果你正在使用HTML5，你可以给锚标签一些孩子并相应地使用CSS。这需要最少量的css和标记，而且根本不需要JS。

查看此示例：http://jsfiddle.net/DavidVII/6ErgJ/

此外，这使用HTML5进行验证。这当然不严格是合法的。

Answer 8

你可以用CSS做到这一点。这是@ ptriek和@ qwertymk解决方案的混合。

demo

请记住，如果你要成为浮动的东西，你必须clear: both;之后。试试removing the 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/

Answer 9

或者，您可以完全避免使用Javascript（我总是更喜欢使用Javascript），将链接放在整个div.post元素上，并使用CSS悬停效果：

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

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

编辑：根据Make a div into a link更新了小提琴，在span元素中添加空a。

最新编辑：更新了使用XHTML 1.0 Strict doctype here的小提琴，它们都有效且validates successfully。

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

9 个答案:

Heres a DEMO

demo

更新

更新2：