当悬停在Elementor中的单独元素上时，如何对图标产生运动效果？

Question

我正在尝试创建一个动画（IE，转换），该元素是通过徘徊在一个单独的旋转元素上触发的元素元素。在这种情况下，当用户徘徊在按钮“了解更多”的按钮上时，左上图的图标向右滑动。

这是我听起来很愚蠢的部分，所以请原谅我：

我命名了按钮类

.learnmore

和图标

.graphic1

我使用了检查工具，发现按钮是（我认为）：

.Elementor-button-wrapper

，但似乎会触发对整个“行”的影响？我想这就是包装纸...（因此，在旁注，我还需要帮助才能在仅悬停在实际按钮本身上时应用效果，哈哈）。

检查工具还显示了图标是（我认为再次）：

.Elementor-Icon

我以某种方式在分别徘徊在每个类上时都设法在图标和按钮上创建运动效果：

.learnmore:hover
        .elementor-button-wrapper{
        transform: translateX(1em); 
        }

 .graphic1:hover
        .elementor-icon{
        transform: translateX(1em); 
        }

但是我不知道如何在徘徊时在.graphic1上进行运动。

我以为我只能复制图标效果并将其放在按钮类中，但这也不起作用：

.learnmore:hover
        .elementor-icon{
        transform: translateX(1em); 
        }

我想这与没有相关的元素有关吗？我读到他们必须是兄弟姐妹或父母的孩子（我再一次不知道我在说什么）。

Answer 1

没有您的HTML，很难说是否可以使用纯CSS解决此问题，或者是否需要JavaScript。

您可以尝试使用 css combinators ，一般同胞组合在您的情况下可能有效。还有一个 stackoverflow问题发现具有纯CSS实现以及JS版本。