一个悬停的元素，目标是多个元素，每个元素都有一个CSS动画

Question

所以我试图将鼠标悬停在一个div上并同时为三个div设置动画。 我试图制作动画的div是：

• 这是我自己徘徊在
的人
• 并且里面有两个孩子。

所以我的问题是如何让语法正确。我曾经有过一次，但后来我做了一些改变，现在我似乎无法弄明白。只是提到这一切都在sass中运行。

这是HTML：

<div id="arrow-container">
    <div id="arrowLine" class="cta-arrow"></div>
    <div id="arrowHead" class="cta-arrow"></div>
</div>

这是style.scss：

#arrow-container{
    width: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    #arrowLine{
        background-color: $white;
        width: 2px;
        height: 340px;
    }
    #arrowHead{
        width: 30px;
        height: 30px;
        border-bottom: 2px solid $white;
        border-left: 2px solid $white;
        transform: rotate(-45deg) translateY(-24px) translateX(24px);
    }
}

这是SCSS _animation.scss：

#arrow-container {
    transition: .05s ease-in-out;
} 
#arrow-container:hover {
    margin-top: 10px;
}
----------
#arrowLine {
    transition: .05s ease-in-out;
}
#arrow-container:hover>#arrowLine {
    background-color: #E63946;
}
----------
#arrowHead {
    transition: .05s ease-in-out;
}
#arrow-container:hover>#arrowHead {
    border-color: #E63946;
}

非常感谢！