html - 使一个 div 可点击但有另一个 div 出现在它上面

Question

没有图片很难解释，所以如果你愿意提供帮助，请访问此页面:http://www.laoistidytowns.ie/node/2

好的，所以在这张照片上我有以下 CSS:(注意这只是一张照片，但我有每个地名的类)

.ballacolla
{
      float:left;
      position:relative;
      width:200px;
      height:200px;
      margin-right:40px;
      margin-bottom:46px;
}

.ballacolla a
{
     position:absolute;
     width:100%;
     height:100%; 
     top:0; 
     left:0; 
     text-decoration:none; /* Makes sure the link   doesn't get underlined */ 
     z-index:10; /* raises anchor tag above everything else in div */ 
     background-color:white; /*workaround to make clickable in IE */ 
     opacity: 0; /*workaround to make clickable in IE */ <br>
     filter: alpha(opacity=1); /*workaround to make clickable in IE */
}

.innerbox
{
      position: absolute; 
      bottom: 0;
      width:180px;
      height:30px;
      background-color:#000;
      opacity:0.75;
      filter: alpha(opacity=40);
      padding-left:20px;
      padding-top:10px;
      z-index: +1;
}

p.boxtag
{
color:#fff;
}

HTML:

<div class="ballacolla"><a href="www.google.com" target="blank"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></a></div>

.ballacolla = dic 方形容器
.ballacolla a = 允许 div 可点击
.innerbox = 底部的深灰色框
.boxtag = 内盒中的文字

我的问题是，如果链接有效，内框(灰色框)就会消失。如何阻止内盒消失？

Answer 1

最有可能的是，即使使用 HTML5，您在链接中的 div 方面也遇到了困难...将内联样式与 block 样式混合。

我会看看这里与此相关的其他一些话题。这为您指出了一种使用特殊类和 display;block 方法将 span 样式化为 div 的好方法:div inside anchor

您始终可以在 div 上使用 onclick=(); 事件，并一起消除 a 标记。