当悬停在另一个<li>上时,如何阻止我的<li>元素移动?

时间:2019-09-06 06:38:29

标签: html css sass

实时示例:https://jsfiddle.net/qnx8btw5/

当我将鼠标悬停在其他元素上时,导航栏中的<li>正在移动。如何阻止这种情况的发生?

我知道我可以在将大小悬停时将大小设置为可以阻止这种情况发生,但是我认为这不是解决此问题的最佳方法。

5 个答案:

答案 0 :(得分:3)

我认为这是因为您将鼠标悬停在列表项上时将边框设置为底部。

默认情况下,您可以为列表项设置透明边框,如下所示:

#navbar-container ul li{
  border-bottom:3px solid transparent;
}

使用此功能,您的导航栏将不会移动。

答案 1 :(得分:2)

由于边界悬停而发生。只需将透明颜色的边框设置为元素transparent的默认值即可。

结果 https://jsfiddle.net/kwvLuxgs/

答案 2 :(得分:2)

默认情况下,将hover上的边框添加为transparent边框。这样,样式就不会在“默认”和悬停之间改变。

答案 3 :(得分:0)

我把这个交给你css,它停止了运动。

li {
            float: left;
            color: $ColorStandard;
            text-align: center;

            margin-left: 12.5px;
            margin-right: 12.5px;
            margin-bottom: 12.5px;
            margin-top: 12.5px;

            font-size: $FontSizeMedium;
            text-decoration: none;
            cursor: pointer;
            a {
              text-decoration: none;
              color: $ColorStandard;
              &:hover {
                border-bottom-color: $ColorStandard;
                border-bottom-style: solid;
                border-bottom-width: 3px;
              }
            }

答案 4 :(得分:0)

add border bottom in li
css.
$DefaultFont: "Roboto", "Open Sans";
$ColorStandard: #212121;
$ColorSubordinate: #A7ADB6;
$FontSizeMedium: 13.5pt;

#header-container {
    position: absolute;
    top: 0;
    z-index: 999;
    margin-top: 0;
    background-color: white;
}

#navbar-container {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $ColorSubordinate;

    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: $ColorSubordinate;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;

        li {
            float: left;
            color: $ColorStandard;
            text-align: center;
            margin-left: 12.5px;
            margin-right: 12.5px;
            margin-bottom: 12.5px;
            margin-top: 12.5px;
            border-bottom:3px solid transparent;
            font-size: $FontSizeMedium;
            text-decoration: none;
            cursor: pointer;
            a {
              text-decoration: none;
              color: $ColorStandard;
            }
            &:hover {
                border-bottom-color: $ColorStandard;
                border-bottom-style: solid;
                border-bottom-width: 3px;
                width:100px;
            }
        }
    }
}

#data-container {
    margin-top: 20px;
    z-index: 1;
}