CSS褪色懸停

Question

我目前正試圖讓圖像在使用CSS懸停在某些文本上時淡入。我已經應用了CSS代碼，但效果不顯示; div出現，但沒有淡入。

此外，我意識到，CSS轉換並不真正與IE瀏覽器兼容。如果有人能指出我的解決方法的正確方向，那將是非常感謝。 （：

CSS：

.thumbnail{ 
position: relative; 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: relative; 
display: none; 
color: black; 
text-decoration: none; 
opacity:0.0; 
filter:alpha(opacity=0); 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 5px; 
left: -1000px; 
border: 1px solid gray; 
background-color: #fff; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
position: relative; 
display: inline; 
top: -290px; 
left: -25px; 
opacity:1.0; 
filter:alpha(opacity=100);/*position where  
enlarged image should offset horizontally */ 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

#networking { 
width: 200px; 
height: 140px; 
margin-left: 360px; 
top: 115px; 
position: absolute; 
background-color: #613286; 
opacity:1.0; 
filter:alpha(opacity=100); 
color: #ffffff; 
text-align:center; 
border-radius: 20px; 
-webkit-transform: rotate(14deg); 
-moz-transform: rotate(14deg); 
-ms-transform: rotate(14deg); 
-o-transform: rotate(14deg); 
transform: rotate(14deg); 
} 

HTML：

<div id="networking"> 
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>  
<span><img src="images/net3.jpg" width="250" /></span></a> 
</div> 

謝謝

Answer 1

與刪除您的顯示規則嘗試：

.thumbnail span{ /*CSS for enlarged image*/ 
    position: relative; 

    /*display: none; remove this */ 

    color: black; 
    text-decoration: none; 
    opacity:0.0; 
    filter:alpha(opacity=0); 
} 

如您有不透明度0你將不需要顯示：無因爲它們是不同的類型，所以你不能在完全不顯示內容的情況下進行內聯轉換。

並修改這條規則：

.thumbnail:hover span { /*CSS for enlarged image on hover*/ 

    top: 0px; /* adjust as needed */ 
    left: -25px; 
    opacity:1.0; 
    filter:alpha(opacity=100);/*position where  
    enlarged image should offset horizontally */ 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

（懸停，然後跨度可以使它有點神經質）。

我還爲轉換添加了ms前綴版本。在這方面顯然沒有用。

對於IE9及以下版本，您可以使用jQuery淡入一個元素（或簡單地使用vanilla JavaScript來修改setTimeout循環中的不透明度）。

小提琴這裏：
http://jsfiddle.net/AbdiasSoftware/9rCQv/

這是你以後在做什麼？