Я пытаюсь сделать скользящее подчеркивание с помощью css, но по какой-то причине он не работает - PullRequest
Новая
       43

Я пытаюсь сделать скользящее подчеркивание с помощью css, но по какой-то причине он не работает

0 голосов
/ 13 июля 2020

Это форма входа и входа, которую я пытаюсь создать, которая переключается на регистрацию, как только я нахожу кнопку. Я ожидаю, что подчеркивание переместится, как только наведете курсор на кнопку регистрации. Скажите, пожалуйста, почему не сдвигается подчеркивание. 

    #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>

1 Ответ

0 голосов
/ 13 июля 2020

Ваш код не работает, потому что селектор 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>
...