logo标签列表

悬停链接效果

htmlcsshover
3
我正在使用CSS hover效果，这是一个剥离粘性的效果（来源：http://www.designrazor.net/30-pure-css3-image-hover-effects/）。我想尝试在后面的圆圈中放置一个链接。
但我的问题是，链接无法点击。有人可以帮我看看问题出在哪里吗？我认为这是由于类的原因，但我不知道我需要更改或在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>

1
使用 z-index CSS 属性。 - Allen
1个回答
3
你面临的问题是，虽然 div 看起来不像，但它们被包含在盒子中。这些盒子是透明的，并放置在链接上方。为了使链接可点击，您需要通过使用 z-index 修改堆叠顺序：
  • 添加一个新规则 #Awesome a，具有以下内容：
    • position: relative; - 启用 z-index 工作
    • transition: z-index 0s; - 将确保当未悬停在元素上时，从 z-index: 1; 到 z-index: 0; 的过渡是即时的
    • z-index: 0; - 默认情况下将链接放置在其他元素后面
  • 添加一个新规则 #Awesome:hover a，具有以下内容：
    • transition: z-index 1s ease-in-out; - 确保动画结束时链接位于其他元素之上
    • z-index: 1; - 将链接置于其他元素之上

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接