css中当鼠标放在输入框时label上移并且下边框变色

就是当鼠标放在输入框时，label标签上移变色，并且输入框下边框也变色

纯css实现
css兄弟选择器只能做到鼠标放入输入框，改变输入框之后的元素样式，所以要把label浮动到输入框左侧
如有帮助，望采纳 ^.^ 谢谢啦

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    div{
        padding-top: 200px;
    }
    input:focus-visible{
        outline-offset: unset !important;
        outline: red;
    }
     input:focus{
         border-bottom: 2px solid red !important;
         color: red;
     }
     .label{
              color: blue;
             position: relative;
     }
     input:focus + .label{
         top: -5px;
     }
     
    
    </style>
    <body>
        <div>
            
            <input type="type" placeholder="请输入" />
            <label class="label">用户名</label>
        </div>
        
    </body>
</html>

你要的是这个效果吗

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .form-item {
                position: relative;
                margin-top: 40px;
            }
            .form-item label,
            .form-item input {
                position: absolute;
                height: 32px;
                line-height: 32px;
                top: 0;
                left: 10px;
            }
            .form-item label {
                color: #ccc;
                transition: .4s;
                z-index: 1;
            }
            .form-item input {
                border: none;
                outline: none;
                border-bottom: 1px solid #ccc;
                background: transparent;
                z-index: 2;
            }
            .form-item input:focus {
                border-color: red;
            }
            .form-item input:focus + label {
                color: red;
                top: -32px;
            }
        </style>
    </head>
    <body>
        <div class="form-item">
            <input type="text" />
            <label for="">请输入账号</label>
        </div>
    </body>
</html>

你是指 input 获取焦点时 如果是这样 onbluar 事件 时 改变 label 和 input border值。 失去焦点 就还原（移除 样式）

如果是 鼠标 移入、或者 划过 那你就得
onmouseover 属性在鼠标指针移至元素之上时触发
onmouseout 属性在鼠标指针移除元素时触发。
时 改变 label 和 input border值。