影像外有一個鏈接，想讓整個div區域（影像）可以點擊
。
<div class="desty_block"> /span>
<figure>< img src="image"></figure>
<div class="detail">/span>
<h3><a href="#"/span>> 印度</a></h3>
</div>/span>
</div>/span>
修改了一些css，但沒有覆寫整個可點擊區域。
.desty_block {position: relative;}。
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
注意：在這個帖子之后，做了一些挖掘，這里是css
。.desty_block h3 {margin: 0 0 0px 0; }
.desty_block h3 a{
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}。
仍然懷疑它是否能在所有設備上作業？
任何想法 謝謝
uj5u.com熱心網友回復：
。<!DOCTYPE html>
<html>
<head>
< meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba（0, 0,0, 0. 2）。)
transition: 0.3s;
width: 40%。
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba（0, 0,0, 0. 2）。)
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: 繼承。
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px 虛線 #009;
background-color: #ddf;
text-align: center;
</style>>
</head>
<body>
<h2>卡片</h2>
<div class="card"/span>>
<a href="http://google.com"/span>>
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4. jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>/span>position: absolute;<br/>
z-index: 3;</code>z-index:
</div>/span>
</a>/span>
</div>/span>
</div>/span>
</body>
</html>/span> uj5u.com熱心網友回復：
用一個錨標簽包住整個div。試試下面的方法（假設desty_block div包含影像 文本）：
<a href="#"/span>>
<div class="desty_block"/span>>
<figure>< img src="image"></figure>
<div class="detail">/span>
<h3>/span>印度</h3>/span>
</div>/span>
</div>/span>
</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/331865.html
標籤：
上一篇：是否有更好的方法來實作這種布局？