Question

我希望有一个不可见的子菜单，并在hower中的父菜单时变为可见。请注意，当鼠标越过子菜单所在的位置时，我不希望子菜单变得可见。在这种情况下，当鼠标翻过菜单＆＃34; menu＆＃34;时，我希望子菜单aaaa，bbbb，cccc和dddd变得可见。但是我无法实现它，因为显示的变化破坏了过渡。这是我的HTML：

<body>
    <nav class="gnb" dir="rtl">
        <ul class="gnb">
            <li class="gnb"> <a class="gnb" href="../products/products.html">menu</a>

                <ul class="sub-constructibles">
                    <li class="gnb"><a class="gnb" href="#">aaaa</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">bbbb</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">cccc</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">dddd</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

这是我的css：

* {
    transition: all .4s;
}
nav.gnb {
    background-color: #0f7f07;
}
li.gnb {
    display:inline-block;
}
li.gnb:hover {
    background-color: #20ca05;
}
ul.sub-constructibles {
    opacity:0;
    visibility:hidden;
    position: absolute;
    background-color: #20ca05;
}
li.gnb:hover ul.sub-constructibles {
    opacity:.9;
    visibility:visible;
}
a.gnb {
    display:inline-block;
}

这是我的小提琴： https://jsfiddle.net/e4h0bccy/

我也尝试过改变可见度而不是显示但是它不起作用bc当鼠标移到它们之前的位置时，子菜单也变得可见。

Answer 1

您的解决方案是将display: block和visibility: hidden设置为子菜单。看看：

https://jsfiddle.net/e4h0bccy/2/

ul.sub-constructibles {
    opacity:0;
    display:block;
    position: absolute;
    background-color: #20ca05;
    visibility: hidden;
}

如果不透明度设置为零，则没有问题，因为在您悬停之前菜单不可见。

段：

* {
    transition: all .4s;
}
nav.gnb {
    background-color: #0f7f07;
}
li.gnb {
    display:inline-block;
}
li.gnb:hover {
    background-color: #20ca05;
}
ul.sub-constructibles {
    opacity:0;
    display:block;
    position: absolute;
    background-color: #20ca05;
    visibility: hidden;
}
li.gnb:hover ul.sub-constructibles {
    display:block;
    opacity:.9;
    visibility: visible;
}
a.gnb {
    display:inline-block;
}

<body>
    <nav class="gnb" dir="rtl">
        <ul class="gnb">
            <li class="gnb" id="constructibles"> <a class="gnb" id="constructibles" href="../products/products.html">menu</a>

                <ul class="sub-constructibles">
                    <li class="gnb"><a class="gnb" href="#">aaaa</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">bbbb</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">cccc</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">dddd</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

显示变化废墟不透明过渡

1 个答案: