时间戳

首页 > 解决方案 > 如何在悬停时显示父元素的兄弟？

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

问题描述

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

我一直在遵循 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; 
}

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

标签： htmlcss

解决方案

将带有类的 div 放在带有类col1的 div 内username。这是有效的，因为当您有一个选择器时，它会选择其中的foo bar {...}任何bar内容foo

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

推荐阅读