2016-03-01 82 views
2

我有這些圖標是我想在懸停時應用過濾器的圖像。但是,它似乎並沒有工作。CSS過渡不適用於我的過濾器:亮度()?

我的代碼:

.icon { 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.icon:hover { 
    -webkit-filter: brightness(130%); 
    filter: brightness(130%); 
} 
+2

哪裏是HTML代碼? –

+0

它的工作原理,或者你需要懸停圖標或其容器http://codepen.io/anon/pen/vGEZmM介意你正在使用的選擇器 –

回答

2

應當指出的是filter不會在Internet Explorer或Firefox 35或更早版本的工作。如果您使用的是瀏覽器,則無法使用。但是,如果您使用的是兼容的瀏覽器,則可以在此處看到,它將起作用。

img { 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
img:hover { 
 
    -webkit-filter: brightness(130%); 
 
    filter: brightness(130%); 
 
}
<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />

有關該實驗技術的更多信息,請訪問以下鏈接

https://developer.mozilla.org/en-US/docs/Web/CSS/filter http://www.w3schools.com/cssref/css3_pr_filter.asp