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

Question

I'm working on this demo : http://jsfiddle.net/hjkryc41/1/

It's about a responsive grid in CSS in an horizontal scrolling page. There are several square divs stacked from top to bottom, and left to right. Each square contains a link, a picture and a title.

Here is the 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>

Here is the 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;
}

I would like to make each square entirely clickable. The problem is that the squares are not clickable in the title zone.

Is it possible to make the squares entirely clickable without including a second link in the div ?

Answer 1

Arrange your each div like this

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

Now your anchor tag will wrap .title div too.

Answer 2

Quick fix: Add pointer-events none to .title :

.title { 
  pointer-events: none;
}

Fiddle