css hover问题?

Question

html

<li class="nav-item sc-active position-relative">
    <a class="nav-link waves-effect waves-dark px-lg-3" href="javascript:void(0)">关于我们</a>
    <ul class="sc-children position-absolute list-unstyled">
        <li class="sc-item">
            <a class="sc-link p-3 waves-effect waves-light d-block">子菜单1</a>
        </li>
        <li class="sc-item">
            <a class="sc-link p-3 waves-effect waves-light d-block">子菜单2</a>
        </li>
        <li class="sc-item">
            <a class="sc-link p-3 waves-effect waves-light d-block">子菜单3</a>
        </li>
        <li class="sc-item">
            <a class="sc-link p-3 waves-effect waves-light d-block">子菜单4</a>
        </li>
        <li class="sc-item">
            <a class="sc-link p-3 waves-effect waves-light d-block">子菜单5</a>
        </li>
    </ul>
</li>

css

#header .sc-children {
    left: .3rem;
    top: 75.3px;
    width: 200px;
    background-color: rgba(var(--sc-dark-rgb), .5);
    color: var(--sc-light);
}

#header .sc-link:hover {
    background-color: rgba(var(--sc-primary-rgb), .6);
}

#header .sc-children {
    display: none;
}

#header .nav-item:hover .sc-children {
    display: block;
}

现在悬停在 '关于我们' 这里, 子菜单会弹出
但是有个问题, 如果鼠标往下移动, 子菜单就会消失
有什么办法能解决这个问题, 让鼠标能够停留在子菜单(注: 不能用js)

Answer 1

因为设置了 top: 75.3px; 导致悬停受限
一个简单的解决思路
去除 top 属性, 改用 padding-top 就可以了
但由于sc-children设置了背景, 悬停上去会导致色块重叠
那么可以在外层加一个无背景的 div, 定位给外面的 div 即可解决

代码如下

html

<li class="nav-item sc-active position-relative">
    <a class="nav-link waves-effect waves-dark px-lg-3" href="javascript:void(0)">关于我们</a>
    <div class="sc-children position-absolute">
        <ul class="list-unstyled">
            <li class="sc-item">
                <a class="sc-link p-3 waves-effect waves-light d-block">子菜单1</a>
            </li>
            <li class="sc-item">
                <a class="sc-link p-3 waves-effect waves-light d-block">子菜单2</a>
            </li>
            <li class="sc-item">
                <a class="sc-link p-3 waves-effect waves-light d-block">子菜单3</a>
            </li>
            <li class="sc-item">
                <a class="sc-link p-3 waves-effect waves-light d-block">子菜单4</a>
            </li>
            <li class="sc-item">
                <a class="sc-link p-3 waves-effect waves-light d-block">子菜单5</a>
            </li>
        </ul>
    </div>
</li>

css

#header .sc-children {
    left: .3rem;
    padding-top: 35px;
    width: 200px;
    color: var(--sc-light);
}

#header .sc-children>ul {
    background-color: rgba(var(--sc-dark-rgb), .5);
}

Answer 2

可以试试设置一个CSS3动画？鼠标移进去时触发动画展开下拉框，且保留最后一帧

#header .sc-children {
    opacity: 0;
}

#header .nav-item:hover .sc-children {
    opacity: 1;
    animation-name: isShow;
    animation-fill-mode: forwards;
}

@keyframes isShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

个人观点，欢迎指正

Answer 3

不能用 JS 这个要求既然有了，那么就应该要明白 :hover 的“作用域”有多大才行。对于:hover，如果你要用这种方式来实现子菜单的弹出，最简单的道理就是，响应区域要够大。

所以，最简单的解决方法就是，当你的鼠标经过某个菜单的时候，就把该菜单的盒模型大小改变，变得跟子菜单一样大就可以了。