关于悬停效果的链接

Question

我正在使用CSS悬停效果，剥离粘贴（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>

Answer 1

你的问题是，虽然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>