Question

我编写了以下代码，用于创建应该指向另一个页面的动画圈子/图标：

<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中不起作用。我根本不确定，但问题是当我点击包含链接的圆圈时没有任何反应。

Answer 1

谢谢大家的回答。我终于找到了答案。简而言之，我将一个圆圈的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显示属性设置为:table，将包含的元素设置为:table-cell。

它终于奏效了！：）

感谢大家的时间和答案：）

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

1 个答案: