How to display the sibling of a parent element on hover?

Question

I want to create a form where the label is only displayed when the input element is on hover.

I've been following the right code on HTML 5 and CSS3 to do that but it's still not working and wondering why ?

Can you show me where my mistakes are ?

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

On CSS3:

.col1{
    display: none;
}

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

With this code, the element stays hidden when input on hover. How to make it display?

Related https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — TylerH, Jun 07 '19 at 18:18

score 0 · Answer 1 · answered Jun 07 '19 at 18:02

Put the div with class col1 inside of the div with the username class. This works because when you have a selector foo bar {...}, this selects any bar that is inside of 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>

score 0 · Answer 2 · answered Jun 07 '19 at 18:13

FYI you had missing tags in your html. In order to be able to make this only with css I would change a little bit the 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>

score 0 · Answer 3 · answered Jun 07 '19 at 18:17

it's just a matter of structure, yours was a little bit complex so here try this:

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>

score -1 · Answer 4 · answered Jun 07 '19 at 18:04

your css is basically traversing down from element with class username, then finding an input element and when we hover over it, traverse down the children of that input element and find an element with class col1.

since input element does not have children, it will now get displayed.

you will first have to traverse up to div element with class row then find the element to display. but this cannot be done in CSS.

your best bet is to use jQuery.

see below.

please not that below, when you leave the input element by moving the mouse up it causes it to shift up since it will hide the label element, and will cause flickering.

$('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>

@elliass If this solved your problem, please click the checkmark to the left of this answer's score to indicate it as the solution for future readers! — TylerH, Jun 07 '19 at 18:51
I think your answer is great, but I have a question: why use jQuery when the same thing can be accomplished with the same brevity using normal JavaScript? — vityavv, Jun 08 '19 at 02:29

How to display the sibling of a parent element on hover?

4 Answers4