CSS adjacent sibling selector doesn't work

Question

this code is supposed to display the "container-1" div every time I hover on the "container" div. However, it isn't acting like I want it to since instead of it displaying block every hover, it just stays to display:none

CSS Code

.container:hover + .container-1 {
  display: block;
  color:blue
}

.container-1{
 display: none;
 margin-bottom: 15px;
 padding: 12px 0;
 border-radius: 3px;
 background-color: rgb(70, 70, 70);
}

HTML Code

<div class="container-1">
        <p><b>$167</b> still needed for this project</p>
    </div>
<div class="container">
        <div class="w3-light-grey" id="bar">
            <div class="w3-orange" style="height: 18px;width:75%"></div>
        </div> 
        <div class="box-1">
            <p>
                <span>
                    <b style="color:orange;">Only 3 days left</b> to fund this project
                </span><br>
                <span>
                    Join the <b>42</b> other donors who have already supported this project. Ever dollar helps.
                </span>
            </p>
            <div>
                <input type="text" class="field">
                <input type="button" class="btn" value="Give Now"><br>
                <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
            </div>
        </div>
</div>

container-1 needs to come after container if it is to be influenced by hovering on container. How fixed is the design? The obvious thing to do is just move container-1 to after container. The problem with (visually) placing it before is that container would move down and you'll get flashing on the hover. Is it OK to reserve space above container? — A Haworth, Jul 15 '22 at 05:43

score 0 · Answer 1 · answered Jul 15 '22 at 04:33

The adjacent sibling selector (+) is used to select an element that is directly after another specific element.

Sibling elements must have the same parent element, and adjacent means immediately following not preceding

Just put the .container-1 at the bottom of .container. And now it will be the adjacent sibling of .container element.

This will do the Work -

.container:hover + .container-1 {
  display: block;
  color: blue;
}

.container-1 {
  display: none;
  margin-bottom: 15px;
  padding: 12px 0;
  border-radius: 3px;
  background-color: rgb(70, 70, 70);
}

<div class="container">
  <div class="w3-light-grey" id="bar">
    <div class="w3-orange" style="height: 18px;width:75%"></div>
  </div>
  <div class="box-1">
    <p>
      <span><b style="color:orange;">Only 3 days left</b> to fund this project</span>
        <br>
      <span>Join the <b>42</b> other donors who have already supported this project. Ever dollar helps.</span>
    </p>
    <div>
      <input type="text" class="field">
      <input type="button" class="btn" value="Give Now"><br>
      <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
    </div>
  </div>
</div>
<div class="container-1">
  <p><b>$167</b> still needed for this project</p>
</div>

score 0 · Answer 2 · answered Jul 15 '22 at 04:34

The problem is that .container-1 comes before .container in terms of the HTML. The best way to get around this would be to swap the positioning of the two HTML elements, then put display: flex and flex-direction: column-reverse on the parent (in this case, <body>):

.container:hover+.container-1 {
  display: block;
  color: blue;
}

.container-1 {
  display: none;
  margin-bottom: 15px;
  padding: 12px 0;
  border-radius: 3px;
  background-color: rgb(70, 70, 70);
}

body {
  display: flex;
  flex-direction: column-reverse;
}

<div class="container">
  <div class="w3-light-grey" id="bar">
    <div class="w3-orange" style="height: 18px;width:75%"></div>
  </div>
  <div class="box-1">
    <p>
      <span><b style="color:orange;">Only 3 days left</b> to fund this project</span><br>
      <span>Join the <b>42</b> other donors who have already supported this project. Ever dollar helps</span>
    </p>
    <div>
      <input type="text" class="field">
      <input type="button" class="btn" value="Give Now"><br>
      <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
    </div>
  </div>
</div>

<div class="container-1">
  <p><b>$167</b> still needed for this project</p>
</div>

Note, however, that the addition of the new element pushes the .container element down the page, meaning that the user may no longer be hovering over it. This may result in some undesirable 'flashing'.

CSS adjacent sibling selector doesn't work

2 Answers2