我正在尝试使用 css 制作滑动下划线，但由于某种原因它无法正常工作

Question

它是我正在尝试构建的登录和登录表单，当我将鼠标悬停在按钮上时，它会立即进行注册。我希望将鼠标悬停在注册按钮上后，下划线会立即移动。请告诉我为什么下划线不滑动。

    #form{
        width: 300px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .butts{
        display: flex;
        justify-content: center;
    }
    
    #form .butt{
        width: 150px;
        height: 50px;
        font-size: 25px;
        display: inline-block;
    
    }
    
    
    hr{
        height: .25rem;
        width: 150px;
        margin: 0;
        background: tomato;
        border: none;
        transition: 1s ease-in-out;
    }
    
    #butt2:hover ~ hr{
        margin-left: 10px;
    }

    <section id="form">
        <div class="butts">
            <button class="butt" id="butt1">Login</button>
            <button class="butt" id="butt2">Sign Up</button>
        </div>
        <hr/>
    </section>

Answer 1

您的代码不起作用，因为 Css 选择器不适用于更高的节点。 “~”仅适用于相邻元素，但此处“hr”标签与 .butts 类相邻。使用下面的代码来实现你想要实现的目标。

    #form{
        width: 300px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .butts{
        display: flex;
        justify-content: center;
        position: relative;
    }
    
    #form .butt{
        width: 150px;
        height: 50px;
        font-size: 25px;
        display: inline-block;
   }
    
    
    hr{
        height: .25rem;
        width: 150px;
        margin: 0;
        background: tomato;
        border: none;
        transition: 1s ease-in-out;
        position: absolute; 
        left: 0;
        bottom: 0;
    }
    
    #butt1:hover ~ hr{
        left: 0;
    }
    #butt2:hover ~ hr{
        left: 50%;
    }

    <section id="form">
        <div class="butts">
            <button class="butt" id="butt1">Login</button>
            <button class="butt" id="butt2">Sign Up</button>
<hr/>
 
        </div>
               </section>