CSS鏈接覆蓋的div塊

可能重複：
Link into full div - html and css CSS鏈接覆蓋的div塊

我想在<a>標籤覆蓋整個<div>塊構造的CSS，這樣在任何地方<div>可以點擊。

下面是最終的div應該是什麼樣子（圖像是64×64像素）：

enter image description here

這裏的HTML：

<div> 
     <img src="" alt=""/> 
     <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3> 
     <span class="details">Save 10% off all package holidays</span> 
    </div>

任何CSS大師的幫助？

來源

2012-09-18 dotnetnoob

？ – Kyle

@KyleSevenoaks - Html5 <！DOCTYPE html> – dotnetnoob

可能是你可以像寫這樣的：

<a href="#"> 
     <img src="" alt=""/> 
     <h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3> 
     <span class="details">Save 10% off all package holidays</span> 
    </a>

CSS

a{ 
display:block; 
}

注：按HTML5可以定義塊元素中<a>標籤

來源

2012-09-18 09:05:12 sandeep

謝謝sandeep，我不知道。在許多情況下，使事情變得容易很多。 – dotnetnoob

雖然這可能會與有些哈克CSS來實現，我相信JS（jQuery的），在這種情況下更容易：

$('#the-div').click(function() { 
    $(this).find('a').eq(0).click(); 
});

或者類似的東西：

var theDiv = document.getElementByID('the-div'); 

theDiv.onclick = function() { 
    window.location = theDiv.getElementsByTagName('a')[0].href; 
};

來源

2012-09-18 09:03:24 powerbuoy

您的意思是JS與jQuery庫。 – Daedalus

由於現在很常見，我有時忘記提及我正在使用jQuery。但是，我的意思是使用jQuery。用普通的JS解決方案更新了答案。 – powerbuoy

Downvoter謹慎解釋？ – powerbuoy

我會建議增加onclick="location.href='http://google.com';" style="cursor:pointer;"到您的div標籤。

來源

2012-09-18 09:05:15 Francis

總結與錨標記

<div> 
<a href="#" class="cont-wrap-link"> 
<img src="" alt=""/> 
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3> 
<span class="details">Save 10% off all package holidays</span> 
<a> 
</div>

CSS

div a.cont-wrap-link 
{padding:0px; margin:0px; 
display:block; 
text-decoration:none; 
}

來源

2012-09-18 09:05:22

如果你想有錨蓋全塊，你的HTML應該反映這一點。儘管塊級錨點是XHTML2/HTML5的新想法，但它們幾乎可以在所有現代瀏覽器（甚至IE 7）中運行。

只是封閉DIV的所有內容與錨：

<div> 
    <a href="#nohref"> 
     <img src="" alt="" /> 
     <h3>On The Beach <span class="exclusive">Exclusive</span></h3> 
     <span class="details">Save 10% off all package holidays</span> 
    </a> 
</div> 


div a { 
    display: block; 
}

參見：http://html5doctor.com/block-level-links-in-html-5/

閃亮，但不是新的

什麼也很有趣關於這項技術的是實際這不是新的：你現在可以做到。 [...]這是關於HTML 5有趣的事情之一 - 它記錄了現有的瀏覽器行爲。由於瀏覽器已經處理了塊級元素的包裝鏈接，並且存在明顯的用例，所以沒有理由人爲地將結構保持爲無效。

來源

2012-09-18 09:06:58 feeela

看看這個Post

記住：確保文檔的結構仍然是有意義的CSS時不存在。

更新

可以使用HTML5 實現這一目標。檢查this

來源

2012-09-18 09:23:26

鑑於你的DOCTYPE是HTML5你可以用整個塊錨：

<a href="yourURL"> 
<div> 
     <img src="" alt=""/> 
     <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3> 
     <span class="details">Save 10% off all package holidays</span> 
    </div> 
</a>

無需您使用哪種DOCTYPE任何JS :)

來源

2012-09-18 09:33:49 Kyle

CSS鏈接覆蓋的div塊

回答

相關問題