0

当您将鼠标悬停在表格单元格上时，我正在尝试在表格单元格中获取图像以对其应用过滤器。我不确定是否有办法只使用 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;}

除了鼠标移出不再应用过渡效果之外，上述内容现在正在工作。鼠标移入会淡入，但鼠标移出只会闪回原始状态。上面的代码适用于我在网站上应用此过滤器的所有其他图像（就进出过渡而言）。

是因为它是一张桌子吗？该表也在一个框架内，但其他过滤的图像也是如此。不知道为什么它不会转换回来。

4

1 回答 1

0

关于您的过渡问题 - 请查看：

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/

于 2013-06-22T21:54:14.910 回答