[英]How to make an entire square div clickable with CSS?
我正在研究此演示: http : //jsfiddle.net/hjkryc41/1/
它是關於CSS在水平滾動頁面中的響應網格。 從頂部到底部,從左到右堆疊了幾個正方形div。 每個方格均包含一個鏈接,圖片和標題。
這是HTML:
<div class="masonry">
<div class="item"><a href="http://arkhana.fr/img/2.png"><img src="http://arkhana.fr/img/2.png" /></a><div class="title">test2</div></div>
<div class="item"><a href="http://arkhana.fr/img/2.png"><img src="http://arkhana.fr/img/2.png" /></a><div class="title">test2</div></div>
<div class="item"><a href="http://arkhana.fr/img/3.png"><img src="http://arkhana.fr/img/3.png" /></a><div class="title">test3</div></div>
<div class="item"><a href="http://arkhana.fr/img/4.png"><img src="http://arkhana.fr/img/4.png" /></a><div class="title">test4</div></div>
<div class="item"><a href="http://arkhana.fr/img/5.png"><img src="http://arkhana.fr/img/5.png" /></a><div class="title">test5</div></div>
<div class="item"><a href="http://arkhana.fr/img/6.png"><img src="http://arkhana.fr/img/6.png" /></a><div class="title">test6</div></div>
<div class="item"><a href="http://arkhana.fr/img/7.png"><img src="http://arkhana.fr/img/7.png" /></a><div class="title">test7</div></div>
<div class="item"><a href="http://arkhana.fr/img/8.png"><img src="http://arkhana.fr/img/8.png" /></a><div class="title">test8</div></div>
<div class="item"><a href="http://arkhana.fr/img/9.png"><img src="http://arkhana.fr/img/9.png" /></a><div class="title">test9</div></div>
<div class="item"><a href="http://arkhana.fr/img/10.png"><img src="http://arkhana.fr/img/10.png" /></a><div class="title">test10</div></div>
</div>
這是CSS:
body {
margin: 0;
background: #e9e9e9;
height:100%;
padding:1em;
}
.masonry {
position:absolute;
height:auto;
top:0px;
bottom:0px;
margin: 0;
padding: 20px;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-width: 220px;
-webkit-column-width: 220px;
column-width: 220px;
}
.item {
width:100%;
display: block;
position:relative;
margin: 0 0 1.5em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.item img {
width:100%;
}
.title {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 4em 1em 1em 1em;
color:white;
font-family:'open sans';
font-weight:100;
font-size:16px;
line-height:25px;
text-align:right;
}
我想使每個方塊完全可點擊。 問題在於正方形在標題區域中不可單擊。
是否可以使正方形完全可點擊而不在div中包含第二個鏈接?
像這樣安排每個div
<div class="item">
<a href="http://arkhana.fr/img/1.png">
<img src="http://arkhana.fr/img/1.png" /><span class="title">test1</span>
</a>
</div>
現在您的錨標記也將包裝.title
div。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.