为什么我的'a href'链接在'divs'里面不起作用？

我写了下面的代码创建了动画界/图标应导致另一页：为什么我的'a href'链接在'divs'里面不起作用？

<html> 
<body> 

<div id="homepageBanner"><img src="images/eris-background.jpg" width="100%" height="500px;" ; /> 

    <div id="LPRCircle"> 
    <center> 
     <div class="CircleContainer"> 
     <a href="Eris-LPR.html"><h5>LPR/ANPR</h5></a> 
     <center> 
      <div><img src="images/circles/LPR_Normal.jpg" width="280px;" class="imgCircle" /></div> 
     </center> 
     </div> 
    </center> 
    </div> 
</div> 

</body> 
</html>

这是CSS：

#LPRCircle { 
    height: 250px; 
    width: 250px; 
    border: 4px solid rgb(30, 154, 148); 
    position: absolute; 
    left: 10%; 
    top: 290px; 
    overflow: hidden; 
    background: rgba(30, 154, 148, 0.5); 
    margin-right: 4px; 
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 135px; 
    -moz-border-radius: 135px; 
    border-radius: 135px; 
    z-index: 3; 
} 
.CircleContainer { 
    z-index: 4; 
} 
#LPRCircle a { 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    display: block; 
    color: #333; 
    position: page; 
    vertical-align: central; 
    text-decoration: none; 
} 
#LPRCircle:hover a h2 { 
    color: rgb(48, 48, 48); 
} 
#LPRCircle .CircleContainer .imgCircle { 
    opacity: 0; 
    visibility: hidden; 
    left: -25px; 
    top: -20px; 
    position: absolute; 
    transition: opacity 0.5s linear; 
    -moz-transition: opacity 0.5s linear; 
    -webkit-transition: opacity 0.5s linear; 
    z-index: 2; 
} 
#LPRCircle .CircleContainer:hover .imgCircle { 
    opacity: 1; 
    visibility: visible; 
    transition: opacity 0.5s linear; 
    -moz-transition: opacity 0.5s linear; 
    -webkit-transition: opacity 0.5s linear; 
    z-index: 2; 
}

我想，问题是什么链接重叠，或者链接在很多div中不起作用。我不确定，但问题是，当我点击包含链接的圆圈时，什么也没有发生。

来源

2016-03-08 F S

能否请您在plunker添加在线协作活生生的例子或JSbin，如：https://plnkr.co/edit/1lt5z7yVNde7Vu1WoMA0?p=preview –

我试图做在线现场演示，但直到我这样做，现场示例上传到网站：www.eris-co.com。问题是关于主页上的四个圆圈。 –

因为您的标记无效！在HTML5中居中使用CSS选择器！ –

谢谢大家的回答。我终于自己找到了答案。总之我改变了一个圈例如HTML代码这样：

<div id="homepageBanner"> 
    <div class="CircleContainer"> 
    <a href="Eris-LPR.html"> 
     <div id="LPRcircle"> 
     <div class="CircleText"> 
      <h2>LPR/ANP</h2> 
      <img src="images/circles/Access_Normal.jpg" class="imgCircle"> 
     </div> 
     </div> 
    </a> 
    </div> 
</div>

所以我基本上做了一个href标记包含整个图像和文本，然后改变了CSS如下：

.CircleContainer { 
    width: 100%; 
    height: 100%; 
    color: #333; 
    text-decoration: none; 
    display: table; 
    text-align: center; 
    vertical-align: middle; 
    display: table; 
} 
.CircleText { 
    padding-top: 70px; 
    font-family: eris; 
    font-size: 1em; 
} 
.CircleContainer:hover h2 { 
    display: none; 
} 
.CircleContainer img { 
    opacity: 0; 
    visibility: hidden; 
    left: -2px; 
    top: -2px; 
    width: 250px; 
    transition: opacity 0.5s linear; 
    -moz-transition: opacity 0.5s linear; 
    -webkit-transition: opacity 0.5s linear; 
} 
.CircleContainer:hover img { 
    opacity: 1; 
    visibility: visible; 
    position: absolute; 
} 
#LPRcircle { 
    z-index: 2; 
    height: 250px; 
    width: 250px; 
    border: 4px solid rgb(30, 154, 148); 
    left: 10%; 
    top: 290px; 
    overflow: hidden; 
    background: rgba(30, 154, 148, 0.5); 
    margin-right: 4px; 
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 135px; 
    -moz-border-radius: 135px; 
    position: absolute; 
    display: table-cell; 
    border-radius: 135px; 
}

CSS中的主要变化是我将.CircleContainer display属性设置为:table，将包含的元素设置为:table-cell。

它终于奏效了！ :)

谢谢大家的时间和答案:)

来源

2016-03-09 07:59:53

是的，现在你有有效的HTML5代码）http://html5doctor.com/block-level-links-in-html-5 / –

为什么我的'a href'链接在'divs'里面不起作用？

回答

相关问题