Question

我试图操纵两个类： .header-grid＆amp; .LG卡的动画

一旦鼠标悬停在.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>

Answer 1

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

如何从CSS3动画中访问其他类

1 个答案: