如何从CSS3动画访问其他类[重复]

Posted 2023-03-06

【中文标题】如何从CSS3动画访问其他类[重复]

【英文标题】：How to access other class from CSS3 animation [duplicate]

【发布时间】：2018-07-05 21:54:21

【问题描述】：

我正在尝试操作两个类： .header-grid & .lg-card-animation

一旦鼠标悬停在 .lg-card-animation 上，我正在尝试更改 .header-grid 类的属性。我确信动画可以正常工作并且链接正确。我正在尝试将.header-grid 中的grid-template-columns 属性更改为55% 45%。我正在使用 SASS 预处理器。如果有什么不同，我也在使用 Vuejs。

特别是不要重复我想问的是：是否可以从在兄弟类中声明的动画影响父类。

SASS：

.header-grid
    height: 100vh
    display: grid
    grid-template-columns: 50% 50%

.lg-card-animation:hover
    animation-name: expand-card
    animation-duration: 1000ms 

 @keyframes expand-card
    100%
        grid-template-columns: 55% 45%

html：

<header class="header-grid">
        <div class="full-height full-width background-fix lg-card-animation" v-bind:style=" 'background-image': 'url(' + headerImages[0].image + ')' ">
            <h1 class="header-text"> headerImages[0].name </h1>
        </div>
        <div class="header-row-grid">
            <div class="full-height full-width background-fix" v-bind:style=" 'background-image': 'url(' + headerImages[1].image + ')' ">
                <h1 class="header-text"> headerImages[1].name </h1>
            </div>
            <div class="full-height full-width background-fix" v-bind:style=" 'background-image': 'url(' + headerImages[2].image + ')' ">
                <h1 class="header-text"> headerImages[2].name </h1>
            </div>
        </div>
    </header>

【问题讨论】：

请包含您编译的 CSS，除非您特别遇到 Sass 语法问题。此外，这将取决于您的 HTML，因此也请包括在内。请参阅minimal reproducible example 了解更多信息。

也分享您的 html 部分...

不，我的 SASS 语法没有问题。

好的，我会编辑帖子。

已编辑帖子...

【参考方案1】：

基本上，CSS 中不存在他的子元素对父元素的影响（在当前版本中）。 你可以做的是使用 Vue。感知您的子元素 (.lg-card-animation) 的 mouseenter 和 mouseleave 事件，并向.header-grid 添加一个新的类名来表示悬停激活。

【讨论】：

@ItzAmmar：这个答案是正确的，因为只有 CSS 没有办法做到这一点，你需要 JS 来处理它（Vue），如果它不起作用，你在概念上会遇到问题.请修改（关闭或接受此答案）您的问题，并深入了解如何通过 JS（或 Vue）与 DOM 交互。