悬停时css剪辑路径动画触发器

Question

我正在构建一个动画菜单，以便在悬停时显示剪辑动画。而不是淡出鼠标。

我在弄清楚如何应用悬停时遇到了问题，因为'hovered'表在动画开始时被完全剪切，并且如果鼠标在桌子上移动则会导致动画重新启动。猜测问题是当鼠标仍然悬停时变化的元素。

以下是它的外观：https://codepen.io/anon/pen/YrGzwE

table:hover {
    animation: load 0.45s ease-out;
    opacity: 1;
}

我并不是在寻找完整的css解决方案，但我想避免使用jquery。

Answer 1

将悬停状态应用于容器：

#tableContainer:hover table {
    animation: load 0.45s ease-out;
    opacity: 1;
}

https://codepen.io/anon/pen/xXEVRv