html - 如何在悬停时显示父元素的兄弟元素？

Question

我想创建一个表单，其中标签仅在输入元素悬停时显示。

我一直在遵循 HTML 5 和 CSS3 上的正确代码来执行此操作，但它仍然无法正常工作，想知道为什么？

你能告诉我我的错误在哪里吗？

在 HTML5 上:

<section class="container">
    <form>
        <div class="row">
            <div class="col1">
                <label>What is your full name ?</label>
            </div>
            <div class="username">
                <input type="text" name="name" placeholder="First name">
                <input type="text" name="name" placeholder="Last name">
            </div>
        </div>
    </form>
</section>

在 CSS3 上:

.col1{
    display: none;
}

.username input:hover .col1{
    display: block; 
}

使用此代码，元素在悬停输入时保持隐藏状态。如何让它显示出来？

Answer 1

将类 col1 的 div 放在类 username 的 div 中。这是可行的，因为当您有一个选择器 foo bar {...} 时，它会选择 foo< 的 inside 中的任何 bar/

.col1{
display: none;
}

.username:hover  .col1{
display: block; 
}

<section class="container">
<form>
    <div class="row">
        
        <div class="username">
        <div class="col1">
            <label>What is your full name ?</label>
        </div>
            <input type="text" name="name" placeholder="First name">
            <input type="text" name="name" placeholder="Last name">
        </div>
    </div>