Link 悬停效果

Question

我正在使用 CSS 悬停效果，剥离粘性 (http://www.designrazor.net/30-pure-css3-image-hover-effects/)。我想尝试在后圈放一个link

但我的问题是 link 不可点击。谁能帮我看看问题出在哪里？我认为这是因为 class 但我不知道我必须更改或放入 CSS 的内容。

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}

<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>

Answer 1

您遇到的问题是，虽然 div 看起来不像，但它们装在盒子里。这些盒子是透明的，堆叠在 link 的顶部。要使 link 可点击，您需要使用 z-index:

修改堆叠顺序

添加新规则 #Awesome a，内容如下：
- position: relative; - 使 z-index 工作
- transition: z-index 0s; - 将确保当元素未悬停时从 z-index: 1; 到 z-index: 0; 的过渡是即时的
- z-index: 0; - 默认情况下会将 link 放在其他元素后面
添加新规则 #Awesome:hover a，内容如下：
- transition: z-index 1s ease-in-out; - 将确保 link 在动画结束时堆叠在其他元素上方
- z-index: 1; - 将 link 置于其他元素之上

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}
#Awesome a {
  position: relative;
  transition: z-index 0s;
  z-index: 0;
}
#Awesome:hover a {
  transition: z-index 1s ease-in-out;
  z-index: 1;
}

<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>

Link 悬停效果

Link on hover effect

html

css

hover