關於懸停效果的鏈接

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>