如何使用CSS使整个Square div可点击？

Question

我正在研究此演示： 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中包含第二个链接？

Answer 1

像这样安排每个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。

Answer 2

快速解决：将pointer-events均不添加到.title ：

.title { 
  pointer-events: none;
}

小提琴