关于悬停效果的链接

时间：2015-10-20 13:55:25

标签： html css hover

我使用CSS悬停效果，剥离粘性（http://www.designrazor.net/30-pure-css3-image-hover-effects/）。我想尝试在后面的圆圈中添加一个链接。

但我的问题是该链接无法点击。任何人都可以帮我看看问题是什么？我认为这是因为班级，但我不知道我要改变什么或放入CSS。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题