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;}

上面的工作正在进行，除了mousing 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/

在单元格悬停时将Webkit过滤器应用于表格单元格中的图像

1 个答案: