making html list to behave in certain way only with CSS

Question

I am making a website with pure css and html , I want to behave in certain way with only using css.

i have a list and every time,i hover on any of them , i want others to take different color. what i have written , doesnt behave same way!

when i hover on any of them , only the items below it ,changes color:

 <div class="sketch">
                    <div class="sketch-div">
                        <a href="#">Sketch</a>
                    </div>
                
                    <div class="hide">
                        <img  width="50%" src="images/sketchcloud.jpg"
                            alt="Sketch Cloud">
                    </div>
                </div>
                <div class="WeTransfer">
                    <div class="WeTransfer-div">
                        <a href="#">WeTransfer</a>
                    </div>
                    <div class="hide">
                        <video width="50%" webkit-playsinline="webkit-playsinline">
                            <source src="images/wetransfer-preview.3b6e83b8.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                
                <div class="Coffee">
                    <div>
                        <a href="#">Coffee by Benjamin</a>
                    </div>
                    <div class="hide">
                        <img width="50%" src="images/coffeebybenjamin.jpg"
                            alt="Coffee by Benjamin">
                    </div>
                </div>
                
                <div class="Beam">
                    <div>
                        <a href="#">Beam</a>
                    </div>
                    <div class="hide">
                        <video width="50%" webkit-playsinline="webkit-playsinline">
                            <source src="images/beam-preview.940b40c4.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="More">
                    <div>
                        <a class="arrow" href="#">More</a>
                    </div>
                    <div class="hide">

                    </div>
                    
                </div>

above is inside nav element.

this is css code for it :

.sketch:hover ~ .WeTransfer  a{
   color:  #ccc;
}

.sketch:hover ~ .Coffee  a{
    color:  #ccc;
}

.sketch:hover ~ .Beam  a{
    color:  #ccc;
}

.sketch:hover ~ .More  a{
    color:  #ccc;
}
/* Wetransfer  */
.WeTransfer:hover ~ .sketch  a{
    color:  #ccc ;
 }
 
 .WeTransfer:hover  ~ .Coffee  a{
     color:  #ccc;
 }
 
 .WeTransfer:hover ~ .Beam  a{
     color:  #ccc;
 }
 
 .WeTransfer:hover ~ .More  a{
     color:  #ccc;
 }
/* Coffee */
.Coffee:hover ~ .WeTransfer a{
    color:  #ccc;
 }
 
 .Coffee:hover ~ .sketch  a{
     color:  #ccc;
 }
 
 .Coffee:hover ~ .Beam  a{
     color:  #ccc;
 }
 
 .Coffee:hover ~ .More  a{
     color:  #ccc;
 }

here im hovering on coffee by benjamin and elements below it get the different color , but the elements top of it wont change colors.

how can i do this just with css and html ?

`~` selects only the siblings AFTER the selected sibling. You can't select previous siblings this way. See https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Kokodoko, Feb 13 '22 at 13:45

Haemin Park · Answer 1 · 2022-02-13T14:16:24.150

0

It seems that you're making the nav section of your webpage. If that's the case, I recommend using li tags instead of using divs!

So for example...

<!-- don't use <div> tags -->

<nav>
  <div>
    <div>Sketch</div>
   </div>

  <div>
    <div>WeTransfer</div>
   </div>

  <div>
    <div>Coffee by Benjami</div>
   </div>

  <div>
    <div>Beam</div>
   </div>
</nav>

But use the li tag:

ul {
  list-style: none;
 }
 
.list-1:hover ~ .list-2,.list-1:hover ~ .list-3,.list-1:hover ~ .list-4 { background-color: yellow; }

<ul>
  <li class="list-1">Sketch</li>
  <li class="list-2">WeTransfer</li>
  <li class="list-3">Coffee by Benjami</li>
  <li class="list-4">Beam</li>
 </ul>

Boom! It's this .list-1:hover ~ .list-2,.list-1:hover ~ .list-3,.list-1:hover ~ .list-4 { background-color: yellow; } simple line of code to solve your problem! As you can see, by hovering on top of the first list item("Sketch"), it changed the color of the second list item(which has not been hovered)

This person explained it very well link

edited Feb 13 '22 at 14:16

answered Feb 13 '22 at 14:03

Haemin Park

3
4

thanks but this doesnt work quit the way I want, when u hover over sketch u want all other to get back ground yellow but not sketch, the same applies for other ones as well, for wetransfer u want everything to get the background yellow, but not we stransfer – Sam Taklimi Feb 13 '22 at 14:06
`.list-1:hover + .list-2 { background-color: yellow; } .list-1:hover ~ .list-3 { background-color: yellow; } .list-1:hover ~ .list-4 { background-color: yellow; } .list-2:hover + .list-3 { background-color: yellow; } .list-2:hover ~ .list-4 { background-color: yellow; } .list-2:hover .list-1 { background-color: yellow; } ` this one doesnt change the top one for example. – Sam Taklimi Feb 13 '22 at 14:12
hey! I changed it, please take a look – Haemin Park Feb 13 '22 at 14:16
`.list-1:hover ~ .list-2,.list-1:hover ~ .list-3,.list-1:hover ~ .list-4 { background-color: yellow; }` – Haemin Park Feb 13 '22 at 14:18
however, this doesn't apply for the ones that come **before** a hovered item. For that, please check this answer [link](https://stackoverflow.com/a/27993987/16334104) – Haemin Park Feb 13 '22 at 14:25

making html list to behave in certain way only with CSS

1 Answers1