Question

在这里更新了代码示例。

很难在标题中总结，我做了一个代码来展示发生了什么：

    /* menu container styling  */
#nav {
    background: #f5f5f5;
    width:500px;
    display:flex;
}

/* style all unondered lists */
ul {
    text-decoration: underline;
    list-style-type: none;
    background: #cecece;
}

/* give submenu different background */
ul li ul {
    background: #e3e3e3;
}

/* add pointer to menu */
ul:hover {
    cursor: pointer;
}

/* make menu items visible when menu is hovered */
ul:hover > li {
    visibility: visible;
    transition-delay: 0s;
}

/* make menu items 
and add transition delay */
ul > li {
    visibility: hidden;
    transition-delay: .5s;
}
ul li:hover li {
    visibility: visible;
    transition-delay: 0s;
}

ul li:hover ul{ 
    visibility: visible;
    transition-delay: 0s;
}

菜单html看起来像这样

<div id="nav">

            <ul>MENU
                <li>item 1</li>
                <li>item 1</li>
                <li>submenu 1
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 2
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 3
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
            </ul>

</div>

我制作了一个包含子菜单的菜单，并为可见性添加了转换延迟：＆＃34;可见＆＃34; ＆安培; ＆＃34;隐藏＆＃34;当您离开菜单时，悬停/离开悬停时的css属性可防止菜单过快消失。

但是这也会导致在快速悬停多个项目的同时打开多个子菜单。（你可以在笔中看到这个）

我在某种程度上需要在显示另一个子菜单项时切断子菜单A的动画/转换！

我无法在CSS中做任何事情，主要是我的区域，但我有一种感觉Javascript或jQuery可以某种方式监视属性和元素，并在元素B为0时将元素A的转换延迟设置为0被徘徊。这是一个可行的解决方案，还是有其他功能呢？

Answer 1

添加ul li：hover li transition-delay：5s并且不会出现其他具有转换延迟的li：4s不隐藏

或者使用像这样的

 $('ul').find('li').each({$('this').css('visibility','hidden')});

Answer 2

显示所有MENUE HTML代码（您放置链接但我无法在旧浏览器中打开网站和低速互联网）以便于理解您显示的巫婆元素的位置。因为如果我在文件中打开你的html代码并打开，则不会显示任何内容，因为li设置为visibility:hidden。如何点击或鼠标悬停。

css不会更改css。试试jquery。你还想要什么？

$('ul').find('li').each({ if($(this).attr('hovered')=='not') $('this').css('display','none');  });

您仍然需要确定如何在jquery悬停元素（$(this).attr('hovered')==not）

中确定

防止多个子菜单同时出现（由于转换延迟），只有一个子菜单悬停

2 个答案: