CSS：懸停過渡

的HTML結構後CSS：懸停過渡

<div id="small_gal"> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
</div>

這些圖像具有陰影效果的，從而border是不是一個解決方案，因爲這將是圖像

enter image description here

邊框是外有過渡，它可以在FF上順利運行，但不能在Chrome或其他瀏覽器上運行

這裏是代碼，我已經使用

#small_gal div:hover{cursor: pointer;} 
#small_gal div:after { 
    content: ''; 
    position: absolute; 
    width: 112px; 
    height: 81px; 
    border: 3px solid #e27501; 
    left: 9px; top: 9px; 
    z-index: 9; 

    opacity: 0; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 
#small_gal div:hover:after { 
    opacity: 1; 
}

注：

#small_gal

只有每個圖像被包裹在一個div所以我們可以實現容器：後

來源

2011-09-05 Aamir Mahmood

確定CSS轉換是，即使在您使用瀏覽器中實現？ http://www.quirksmode.org/ – marcgg

是邊框淡入淡出效果在我的Firefox 6上正常工作。檢查右上方3個鏈接，他們正在所有瀏覽器中工作。 –

因爲鏈接已經死亡而進行投票 –

火狐4+是唯一的瀏覽器支持僞元素的轉換，例如:before和:after。

來源：http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

來源

2011-09-05 10:56:20 tw16

Ahh是真的，那麼替代品可能是什麼？我嘗試使用jQuery，但它也是一個混亂，因爲保持圖像內部和圖像上方的橙色邊框會導致在圖像上自發引發的mouseout事件，因此它會產生波動效果並且也不會點擊。 –

我接受了你的回答:) –

CSS過渡仍然在WebKit的實驗所以很可能你已經打了一些邊緣的情況下錯誤涉及:: after僞選擇。我建議完全避免它，而只是轉換border-color。這在Chrome和Safari瀏覽器工作得很好：

#small_gal div.p { 
    border: 2px solid transparent; 
    -webkit-transition: border-color 1s ease-in; 
} 

#small_gal div.p:hover { 
    border-color: orange; 
}

來源

2011-09-05 11:00:39

感謝您的反饋，我可以使用邊框，但圖像在img內部有陰影和白色邊框，因此應用任何類型的邊框都會在陰影外部添加期望 –

您可以在僞元素，如使用CSS轉換：前：如果以後你可以定義元素本身的特性和僞元素使用inherit。所以在你的情況下，不要在opacity上進行轉換，你可以在border-color上進行轉換。

*, *:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#small_gal div { 
 
    border-color: transparent; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: border-color 0.5s ease-in-out; 
 
    -moz-transition: border-color 0.5s ease-in-out; 
 
    -o-transition: border-color 0.5s ease-in-out; 
 
    -ms-transition: border-color 0.5s ease-in-out; 
 
    transition: border-color 0.5s ease-in-out; 
 
} 
 
#small_gal div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-color: inherit; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#small_gal div:hover { 
 
    border-color: #e27501; 
 
} 
 
#small_gal div img { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 150px; 
 
    width: auto; 
 
}

<div id="small_gal"> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
</div>

來源

2015-12-23 18:05:01

CSS：懸停過渡

回答

相關問題