Fatal编程技术网
  • hyperlink/
  • Hyperlink 为什么我的'；a href'；链接内部不工作'；divs'；？

Hyperlink 为什么我的'；a href'；链接内部不工作'；divs'；？

hyperlink

Hyperlink 为什么我的'；a href'；链接内部不工作'；divs'；？,hyperlink,href,Hyperlink,Href,我编写了以下代码，创建了动画圆圈/图标，这些圆圈/图标将指向另一个页面： <html> <body> <div id="homepageBanner"><img src="images/eris-background.jpg" width="100%" height="500px;" ; /> <div id="LPRCircle"> <center> <div class="CircleC

我编写了以下代码，创建了动画圆圈/图标，这些圆圈/图标将指向另一个页面：

<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>
我想，问题是链接重叠，或者链接在这么多div中不起作用。我一点也不确定，但问题是，当我点击包含链接的圆圈时，什么也没有发生。

谢谢大家的回答。我终于自己找到了答案。简而言之，我将一个圆圈的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>
CSS中的主要变化是我将
.CircleContainer
显示属性设置为
：table
，将包含的元素设置为
：table cell

它终于成功了！：）

谢谢大家的时间和回答：）

你能在plunker或JSbin上添加一个协作在线直播示例吗？比如：我正在尝试在线直播演示，但在我这么做之前，直播示例将上载到网站：www.eris-co.com。问题是关于主页上的四个圆圈。因为你的标记无效！在HTML5中，中心smth使用CSS选择器！不要使用
，不要嵌套
，那是什么
在第一次
结束时做什么？我删除了s和多余的；但仍然不起作用（是的，现在您有了有效的HTML5代码）

<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>



.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;
}