將Webkit篩選器應用於懸停在單元格上的表格單元格中的圖像

Question

我試圖在表格單元格中獲取圖像以將鼠標懸停在表格單元格上時應用它。我不確定是否有辦法通過CSS來實現。

[編輯]

table.flip td:hover { 
    background-color: #510000; 
    cursor: pointer; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out;} 

table.flip td:hover img { 
    -webkit-filter: brightness(400%); 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out;} 

以上是工作，現在比的事實，鼠標放在了不重新申請過渡效果等。陷入困境已經漸漸消失，但是它已經回到了原來的狀態。上面的代碼適用於我在網站上應用此過濾器的所有其他圖像（根據過渡和過渡）。

是因爲它是一張桌子嗎？該表格也在一個框架內，但其他過濾的圖像也是如此。不知道爲什麼它不會轉回。

Answer 1

關於你的過渡問題 - 看看：

http://learn.shayhowe.com/advanced-html-css/transitions-animations

的色彩過渡工作就像一個魅力。

編輯：

好了，現在我看到你的問題：

過渡需要蜜蜂應用於元素本身而不是懸停狀態。

table.flip td { 
    cursor: pointer; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
} 

table.flip td:hover { 
    background-color: #510000; 
} 

table.flip td img { 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
} 

table.flip td:hover img { 
    -webkit-filter: brightness(400%); 
} 

這裏是小提琴：

http://jsfiddle.net/ULHb4/