当我对父元素应用“变换比例”时，为什么会覆盖针对子元素的悬停效果？答案

【问题标题】：Why is the hover effect targeting child being overridden when I apply a 'transform scale' to the parent element?当我对父元素应用“变换比例”时，为什么会覆盖针对子元素的悬停效果？
【发布时间】：2023-03-29 12:15:01
【问题描述】：

下面是嵌套在下拉列表中的下拉列表。第一个代码 sn-p 工作得很好；当我将鼠标悬停在第一个下拉列表的父级上时，它的高度转换并按我的意图显示，与随后的嵌套下拉列表一样。

问题出在第二个 sn-p...

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: hsla(33,25%,75%,1);
    box-sizing: border-box;
}

.flex-container {
    width: 100%;
}

.flex-container a {
    background: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 25px;
    padding: 10px;
    text-decoration: none;
    transition: background-color 500ms, height 500ms, color 500ms;
}

.flex-container a:hover {
    background: cornflowerblue;
    color: snow;
}

.flex-container li:hover {
    box-shadow: 10px 10px 10px black;
}

.flex-container ul {
    list-style: none;
    display: flex;
}

.flex-container > ul > li {
    width: 100%;
    position: relative;
}

ul li ul {
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 50%;
}

ul li li {
    width: 100%;
    top: 0;
    height: 0;
    overflow: hidden;
    transition-duration: 500ms;
}
li:hover > ul > li {
    height: 45px;
}

/*
ul li li:hover {
    transform: scale(1.1);
}
*/

<!DOCTYPE html>
<html lang="eng">
    <head>
        <title>Page 2</title>
        <meta charser="utf-8">
        <link rel="stylesheet" href="styles/styles2.css">
    </head>
    <body>
        <div class="flex-container">
            <ul>
                <li>
                    <a href="index.html">Home</a>
                    <ul>
                        <li>
                            <a href="Page2.html">Two</a>
                        </li>
                        <li>
                            <a href="Page2.html">Two</a>
                        </li>
                        <li>
                            <a href="Page2.html">Two</a>
                            <ul>
                                <li>
                                    <a href="Page2.html">two</a>
                                </li>
                                <li>
                                    <a href="Page2.html">two</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
            </ul>
        </div>
    </body>
</html>

在这里，我在 CSS 的最底部进行了一项更改，因为我希望悬停效果更加明显。我对下拉列表的 li 应用了变换比例效果。

第一个下拉列表可以正常工作，但第二个下拉列表不能。

有人能解释一下发生了什么吗？

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: hsla(33,25%,75%,1);
    box-sizing: border-box;
}

.flex-container {
    width: 100%;
}

.flex-container a {
    background: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 25px;
    padding: 10px;
    text-decoration: none;
    transition: background-color 500ms, height 500ms, color 500ms;
}

.flex-container a:hover {
    background: cornflowerblue;
    color: snow;
}

.flex-container li:hover {
    box-shadow: 10px 10px 10px black;
}

.flex-container ul {
    list-style: none;
    display: flex;
}

.flex-container > ul > li {
    width: 100%;
    position: relative;
}

ul li ul {
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 50%;
}

ul li li {
    width: 100%;
    top: 0;
    height: 0;
    overflow: hidden;
    transition-duration: 500ms;
}
li:hover > ul > li {
    height: 45px;
}

ul li li:hover {
    transform: scale(1.1);
}

<!DOCTYPE html>
<html lang="eng">
    <head>
        <title>Page 2</title>
        <meta charser="utf-8">
        <link rel="stylesheet" href="styles/styles2.css">
    </head>
    <body>
        <div class="flex-container">
            <ul>
                <li>
                    <a href="index.html">Home</a>
                    <ul>
                        <li>
                            <a href="Page2.html">Two</a>
                        </li>
                        <li>
                            <a href="Page2.html">Two</a>
                        </li>
                        <li>
                            <a href="Page2.html">Two</a>
                            <ul>
                                <li>
                                    <a href="Page2.html">two</a>
                                </li>
                                <li>
                                    <a href="Page2.html">two</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>
            </ul>
        </div>
    </body>
</html>

【问题讨论】：

标签： drop-down-menu nested hover css-transforms

【解决方案1】：

固定。

我不明白为什么首先会出现问题，也不明白为什么我找到的修复程序有效但确实有效。

我只是在 (ul li li:hover) 中将溢出属性设置为“可见”，它就可以工作了。

【讨论】：