How do I make an animation target an element that doesn't trigger it?

Question

I'm trying to get an animation to play when I hover over a button, but I want it to target the label div and the label p elements instead of the element that triggers it.

Also, I need it to work when only the div is hovered over, and vice versa. It should play the animation for both elements regardless if only one is being hovered over.

I could use a div I guess, to group them together, but that would be tedious and'll probably clutter the code. I already have like an entire page full of nested divs. I feel like it would be easier if I just used selectors correctly.

HTML

<html>
    <head>
        <link rel="stylesheet"
              href="style.css">
    </head>
    
    <body>
        <div class="button"
             style="max-width: 157.39px; max-height: 157.39px;"
            <div class="label">
                <p class"label">the big</p>
            </div>
        </div>
    </body>
</html>

CSS

@keyframes show-label {
    from {
        opacity: 0%;
    }
    
    to {
        opacity: 100%;
    }
}


body {
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: center;
}

div.button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: auto;
    width: 20vw;
    height: 20vw;
    background-color: lightgray;
    border-radius: 10px;
}

.label {
    opacity: 0%;
}

.label:hover {
animation: show-label 500ms forwards;

div.label {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 10px 10px;
}

p.label {
    color: white;
    font-size: min(1.8vw, 18.17px);
    text-align: center;
}

Phaelax z · Accepted Answer · 2021-10-18T03:07:34.580

Aside from the fact your code is missing closing characters in the html and css, you can target the label with a button hover like this:

.button:hover .label { }

As an alternative to the keyframes, you can do a simple "transition" to easily make it fade in and back out again.

body {
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: center;
}

div.button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: auto;
    width: 20vw;
    height: 20vw;
    background-color: lightgray;
    border-radius: 10px;
}

.label {
    opacity: 0%;
}

.button:hover{cursor:pointer;}



div.label {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 10px 10px;
    transition: opacity 0.3s linear;
}

p.label {
    color: white;
    font-size: min(1.8vw, 18.17px);
    text-align: center;
    transition: opacity 0.3s linear;
}


.button:hover .label {
  opacity:100%;
 }

        <div class="button"
             style="max-width: 157.39px; max-height: 157.39px;">
            <div class="label">
                <p class="label">the big</p>
            </div>
        </div>

Sorry, I had to type everything out from scratch. I wasn't able to log in on my school computer. — grem, Oct 18 '21 at 03:39

How do I make an animation target an element that doesn't trigger it?

1 Answers1