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

问题描述 投票：0回答：1

下面是嵌套在下拉列表中的下拉列表。第一个代码段可以正常工作；当我将鼠标悬停在第一个下拉列表的父级上时，它会发生高度转换，并按照我的预期显示，以及后续的嵌套下拉列表。

问题出在第二个片段...

* {
    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个回答
0
投票

已修复。

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

我只是在（ul li li：hover）中将溢出属性设置为'visible'，并且它可以正常工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.