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 =方形容器
.ballacolla a =允许div可点击
.innerbox =底部的深灰色框 .boxtag =内箱中的书写

我的问题是如果链接正常工作，内盒（灰色框）会消失。如何阻止内盒消失？

Answer 1

最有可能的是，即使使用HTML5，您也无法使用链接中的div ...与块样式混合使用。

我将看一下与此相关的其他一些主题。这个指向一个很好的方法，使用特殊的类和display;block方法将span设置为div：div inside anchor

您也可以随时在div上查看onclick=();事件并同时删除a标记。

Answer 2

在你的风格中，它表示不透明度：标签为0。在下面添加一个类。

.field-items a{
    background:none;
    opacity:1;
}

Answer 3

好的家伙我明白了。我必须在我的html中第一个div之后关闭标签。即我的html现在看起来像：<div class="abbeyleix"><a href ="www.google.com"></a><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>

你在标签之间没有任何东西的原因是因为你实际上正在做CSS中的所有工作......这么简单的修复，但它现在正在工作，谢谢大家的支持帮助

使div可点击，但在其上显示另一个div

3 个答案: