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>

我正在尝试使用CSS做下划线，但由于某种原因其不起作用

1 个答案: