如何使用 CSS 使整个方形 div 可点击

  • 本文关键字:div 方形 何使用 CSS html 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 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>

现在,您的锚标记也将包装.titlediv。

快速修复:将pointer-events none 添加到.title

.title { 
  pointer-events: none;
}

小提琴

最新更新