显示变化破坏不透明度转换

我想要一个不可见的子菜单，当hower中的父菜单时，它会变成可见的。请注意，我不希望当鼠标移到子菜单应该位于的位置时，子菜单变得可见。在这种情况下，我希望当鼠标转到菜单"menu"时，子菜单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/

我也尝试过改变可见性而不是显示，但这不起作用，因为当鼠标移到之前的位置时，子菜单也会变为可见。

您的解决方案是将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>

相关内容

最新更新

热门标签：