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