html - 对 Angular 线移动和仅 CSS 过渡延迟

Question

我想用对 Angular 线鼠标移动创建类似 Amazon 的大型菜单，但仅使用 CSS。我已经成功地进行了右上对 Angular 线移动，但无法进行右下角移动。

这是描述问题的图片:

更新:这个想法是通过允许用户沿对 Angular 线移动他的鼠标而不是将移动限制在父级的矩形内，从而更加用户友好。

好的，让我们试试这个方法:当你的鼠标光标正好在数字 3 上时，然后你像绿线一样做一个QUICK 对 Angular 线移动，Parent 2 没有被触发并且 3333 被正确显示在右侧。但是，如果您移过红线方向，将触发 Parent 4 并且在右侧我们看到 4444 而不是 3333...

我通过向子菜单添加以下过渡来完成右上角的移动:

visibility: hidden;
transition: visibility 280ms ease-in;

然而，将鼠标向右下方向移动会以某种方式忽略此转换并立即触发悬停在下一个父类别上。

到目前为止我所做的演示:

ul{
    padding: 0;
    background-color: #eee;
    position: relative;
}
ul > li{
    list-style: none;
    width: 205px;
}
ul > li > a{
    display: block;
    padding: 9px 15px;
    box-sizing: border-box;
    border-right: 1px solid #E1E3DF;
    transition: all 280ms ease-in;
    position: relative;
    text-decoration: none;
    color: #000;
}
ul > li:hover > a{
    background-color: #E5F4F7;
    color: #34A8C4;
}
ul > li > nav{
    position: absolute;
    padding: 15px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 205px;
    overflow: hidden;
    background-color: #E5F4F7;

    /* Transition magic here*/
    visibility: hidden;
    transition: visibility 280ms ease-in;
}
ul > li:hover > nav{
    visibility: visible;
}

<ul>
    <li>
        <a href="" title="">Parent category 1</a>
        <nav>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 2</a>
        <nav>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 3</a>
        <nav>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 4</a>
        <nav>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 5</a>
        <nav>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 6</a>
        <nav>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 7</a>
        <nav>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 8</a>
        <nav>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 9</a>
        <nav>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
        </nav>
    </li>         
</ul>

如果有人喜欢它，也将上面的代码片段添加到 Jsfiddle:https://jsfiddle.net/nikimihaylov/9ydrhk30/

请注意:

我不想使用任何 Javascript 解决方案。是否可以仅使用 CSS 实现此目的？

Answer 1

您可以向右侧导航元素添加过渡延迟。

ul > li:hover > nav{
    visibility: visible;
    transition-delay: 280ms;
}

jsFiddle

ul{
    padding: 0;
    background-color: #eee;
    position: relative;
}
ul > li{
    list-style: none;
    width: 205px;
}
ul > li > a{
    display: block;
    padding: 9px 15px;
    box-sizing: border-box;
    border-right: 1px solid #E1E3DF;
    transition: all 280ms ease-in;
    position: relative;
    text-decoration: none;
    color: #000;
}
ul > li:hover > a{
    background-color: #E5F4F7;
    color: #34A8C4;
}
ul > li > nav{
    position: absolute;
    padding: 15px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 205px;
    overflow: hidden;
    background-color: #E5F4F7;

    /* Transition magic here*/
    visibility: hidden;
    transition: visibility 280ms ease-in;
}
ul > li:hover > nav{
    visibility: visible;
    transition-delay: 280ms;
}

<ul>
    <li>
        <a href="" title="">Parent category 1</a>
        <nav>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 2</a>
        <nav>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 3</a>
        <nav>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 4</a>
        <nav>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 5</a>
        <nav>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 6</a>
        <nav>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 7</a>
        <nav>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 8</a>
        <nav>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 9</a>
        <nav>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
        </nav>
    </li>         
</ul>