爲什麼我的'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'裏面不起作用？

回答

相關問題