Question

以下是我的问题演示： Demo

我有两张absolute张图片，每张图片都会动画clip-path。 second first DOM hover hover first之后，我可以看到first动画。但我看不到hover的{{1}}动画。所以我的想法是，每当我将second first hover first clip-path悬停时first clip-path。所以基本上：

second - ＆gt;展开hover second的{{1}} - ＆gt;收缩clip-path

second

clip-path - ＆gt;展开first的{{1}} - ＆gt;收缩+ connector

.first:hover + .second {
}

到目前为止，我尝试了second，例如：

first

但是，如果我将SELECT *, (SELECT json_agg(deals.*) FROM deals WHERE vendors.id = deals.vendorid) as deals FROM vendors悬停，这将为deals设置动画，因此这无济于事。任何想法？

Answer 1

你的想法是对的：

.first:hover + .second {
    -webkit-clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
    clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
}

小提琴：https://jsfiddle.net/sb4bk0xg/3/

带剪辑路径的图像动画

1 个答案: