对角线运动和CSS只有转换延迟

时间：2016-06-16 19:28:28

标签： html css html5 css3

我想创建亚马逊像大型菜单，对角鼠标移动，但仅限CSS 。我已经成功进行了右上方的对角线运动，但无法获得右下方的运动。

以下是描述问题的图片：

enter image description here

更新：通过允许用户沿对角线移动鼠标而不是仅限制在Parent的矩形内部移动，我们的想法是更加用户友好。

好吧，让我们这样试试：当你的鼠标光标正好在数字3上时，你就像绿线那样做一个 QUICK 对角线运动，没有触发父2，正确显示3333在右侧。但是，如果您移动红线方向，则会触发父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实现此目的？

1 个答案:

答案 0 :(得分：2)

您可以向右侧导航元素添加转换延迟。

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>

相关问题
最新问题