gpt4 book ai didi

css - 如何从 CSS3 动画访问其他类

转载 作者:行者123 更新时间:2023-11-28 11:59:01 25 4
gpt4 key购买 nike

<分区>

我试图操纵两个类:.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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com