如何从 CSS3 动画访问其他 class
How to access other class from CSS3 animation
我试图操纵两个 classes:
.header-grid & .lg-card-animation
我试图在鼠标悬停在 .lg-card-animation 上时更改 .header-grid class 的 属性。我确定动画有效并且链接正确。我正在尝试将 .header-grid 中的 grid-template-columns
属性 更改为 55% 45%
。我正在使用 SASS 预处理器。如果有区别的话,我也在使用 Vuejs。
特别是为了避免重复,我想问的是:是否有可能影响在同级 class 中声明的动画的父 classes。
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>
基本上,他的 children 对 parent 元素的影响在 CSS 中不存在(在当前版本中)。
你能做的就是使用 Vue。感知 child 元素 (.lg-card-animation
) 的 mouseenter 和 mouseleave 事件,并将新的 class 名称添加到 .header-grid
以表示悬停激活。
我试图操纵两个 classes: .header-grid & .lg-card-animation
我试图在鼠标悬停在 .lg-card-animation 上时更改 .header-grid class 的 属性。我确定动画有效并且链接正确。我正在尝试将 .header-grid 中的 grid-template-columns
属性 更改为 55% 45%
。我正在使用 SASS 预处理器。如果有区别的话,我也在使用 Vuejs。
特别是为了避免重复,我想问的是:是否有可能影响在同级 class 中声明的动画的父 classes。
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>
基本上,他的 children 对 parent 元素的影响在 CSS 中不存在(在当前版本中)。
你能做的就是使用 Vue。感知 child 元素 (.lg-card-animation
) 的 mouseenter 和 mouseleave 事件,并将新的 class 名称添加到 .header-grid
以表示悬停激活。