我懸停的按鈕的CSS過渡正在推動容器向下

我有一個HTML h3標籤，我做了一個按鈕過渡。在:hover我已經把它翻譯成y軸10px並且按比例增加1.10。當發生轉變它推動的容器裏非常輕微，因爲我會在屏幕截圖顯示：我懸停的按鈕的CSS過渡正在推動容器向下

我知道這很難看到，但它向下推約2-5像素。我一直無法弄清楚爲什麼會發生這種情況。我在這裏重現這個問題：http://codepen.io/marlee/pen/VaLZPW?editors=1100

下面是HTML：

<article class="about-page-cta"> 
     <h3>Want to get to know us better?</h3> 
     <a href="contact.html"><h4 class="contact-us-button">CONTACT US</h4>  </a> 
    </article>

和CSS：

.about-page-cta{ 
background-color: #30c0d8; 
display: flex; 
flex-direction: column; 
align-items: center; 
padding: 2rem 0 2rem 0 
} 

.about-page-cta h3{ 
margin-top: 0; 
padding-top: 2rem; 
color: white; 
} 

.about-page-cta a { 
text-decoration: none; 
} 

.contact-us-button{ 
color: white; 
background: #FF6952; 
border-radius: 10%; 
border: none; 
padding: .75rem; 
margin: 1rem; 
transition: transform, background, .5s ease; 
transform: scale(1); 
} 

.contact-us-button:hover{ 
background: #ff5339; 
box-shadow: 0 0 6px white; 
transform: scale(1.05); 
}

任何幫助表示讚賞！

來源

2016-03-02 femmebug

我們不能幫你，因爲'但是，codepen娛樂沒有相同push-down effect.'你正在測試這個瀏覽器？您在codepen中排除的元素是否可以導致此問題？ – stackErr

我發佈了codepen以防萬一有人在看到它時發現我可能錯過了某些東西。我正在使用chrome。我可以嘗試將更多的頁面元素添加到codepen中，並查看是否有更改。 @stackErr – femmebug

好吧，由於我在頁面中添加了很多其他元素，所以我可以在這裏重新創建下推效果：http://codepen.io/marlee/pen/VaLZPW?editors=1100 @stackErr – femmebug

你的問題是border-bottom對anchor taghover ..

a:hover{ 
    text-decoration: none; 
    color: #FF6952; 
    border-bottom: 2px solid #30C0D8; 
}

卸下底部邊框屬性或要應用邊框更具體。或

.about-page-cta a:hover { 
border:0; 
}

我想應該解決的問題......

*線86的codepen

來源

2016-03-02 05:25:59

非常感謝！你是對的。我改變了特異性。乾杯。 @moid – femmebug

高興地幫助你.. :) –

我懸停的按鈕的CSS過渡正在推動容器向下

回答

相關問題