How to access other class from CSS3 animation

Question

There are two classes I am trying to manipulate: .header-grid & .lg-card-animation

I am trying to change the property of the .header-grid class once the mouse hovers over the .lg-card-animation. I am sure that the animation works and is linked correctly. I am trying to change the grid-template-columns property in .header-grid to 55% 45%. I am using the SASS preprocessors. I am also using Vuejs if that makes a difference.

Specifcially not to get duplicated what I want to ask is: Is it possible to effect parent classes from an animation that was declared in a sibling class.

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>

Please include your compiled CSS unless you are having a problem with the Sass syntax, specifically. Also, this will depend on your HTML, so please include that as well. See [mcve] for more info. — TylerH, Jan 26 '18 at 14:31
This question looks like a duplicate of [this](https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) which is a duplicate of [this](https://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect-a-different-element) which is a duplicate of [this](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Raul Sauco, Jan 26 '18 at 16:00

score 1 · Accepted Answer · answered Jan 26 '18 at 16:10

1

Basically, effects on parent element by his children not exist in CSS (in it's current version). What you can do is to using Vue. Perceive the mouseenter and mouseleave events of your child element (.lg-card-animation) and add a new class name to .header-grid to representing the hover activation.

answered Jan 26 '18 at 16:10

Zeev Katz

2,273
2
16
42

1

@ItzAmmar: this answer is correct as there is no way to this with just CSS, you need JS for it (Vue), and if it didn't work, you are getting something wrong conceptually speaking. Please, revise (close or accept this answer) your question and dig deeper in how to interact with the DOM via JS (or Vue). – avcajaraville Jan 26 '18 at 20:17

How to access other class from CSS3 animation

1 Answers1