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 {...}时，它将选择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>

Answer 2

仅供参考，您在html中缺少标签。为了仅使用CSS可以做到这一点，我将对html进行一些更改。

.col1 {
  display: block;
  visibility: hidden;
}

.username:hover > .col1 {
  visibility: visible;
}

<section class="container">
  <form>
    <div class="row">

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

Answer 3

这只是结构问题，您的有点复杂，所以在这里尝试一下：

label {
display:none;
width:100%;
}
.username:hover label{
display:block;
}

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

Answer 4

您的css基本上是从类为username的元素向下遍历，然后找到一个输入元素，当我们将其悬停在该元素上时，遍历该输入元素的子元素并找到一个类为col1的元素

由于输入元素没有子元素，因此现在将显示它。

您必须首先遍历类为row的div元素，然后找到要显示的元素。但这不能在CSS中完成。

您最好的选择是使用jQuery。

请参阅下文。

请不要在下面进行说明，当您通过向上移动鼠标离开输入元素时，它会导致其上移，因为它将隐藏标签元素，并会导致闪烁。

$('input').on('mouseover',function() {
$('.col1').show();
});
$('input').on('mouseleave',function() {
$('.col1').hide();
});

.col1{
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

如何在悬停时显示父元素的同级？

4 个答案: