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 none添加到.title：

.title { 
  pointer-events: none;
}

Fiddle

如何用CSS点击整个方形div？

2 个答案: