如何让hover触发的动画作用于非触发源的label类div与p元素

先修正原有代码的语法错误 #

你的现有代码存在几处语法问题会导致样式不生效，先修正：

修正后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>

修正点：

• 补全了div.button起始标签的闭合尖括号>
• 补全了p标签class属性的等于号：class="label"

核心选择器实现需求 #

不需要额外新增嵌套div，用CSS的:has()选择器就能实现你的要求：无论hover按钮本身、label类div还是label类p，都会给两个label元素触发动画，代码如下：

修正后完整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%;
}

/* 核心触发规则 */
div.button:hover .label,
div.button:has(.label:hover) .label {
    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;
}

规则说明 #

• div.button:hover .label：hover整个按钮区域时，选中按钮内所有label类元素触发动画
• div.button:has(.label:hover) .label：只要按钮内任意一个label类元素被hover，就选中所有label类元素触发动画
  两个规则组合完全覆盖你要的所有触发场景，不需要修改DOM结构增加冗余嵌套。

内容的提问来源于stack exchange，提问作者grem