How to select all children elements when hovered over a children element

Question

I want to replicate this effect when you hover over a text, all other texts will get opacity 0.

Here's the site: https://www.jeandawson.com/

I tried to approach this problem with pure css. However, to my knowledge, you can't select all the children when you hover a particular child and affect them.

I tried it with a ~ selector which just works partially because it sets the opacity to upcoming children but the previous are unaffected.

I tried this code with a javascript, but the value in a selectedBox won't get saved when I hover it and the opacity won't change. I am still learning javascript and I believe that with event listener the code won't change?

 var boxes = document.querySelectorAll("[class^=box-]") let selectedBox = null const newList = [...boxes] boxes.forEach( (e) => { e.addEventListener("mouseover", () =>{ selectedBox = e }) e.addEventListener("mouseleave", ()=>{ selectedBox = null }) }) console.log(selectedBox) boxes.forEach( (e) => { if (selectedBox == null){ e.style.opacity = 1 } else{ e.style.opacity = 0 } })

 * { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; font-size: 3rem; font-family: serif; } [class^="box-"] { background-color: skyblue; }.container:hover [class^="box-"]:not(:hover) { opacity: 0; }.box-1 { grid-area: A; align-self: flex-start; }.box-2 { grid-area: B; align-self: flex-start; }.box-3 { grid-area: C; align-self: flex-start; }.box-4 { grid-area: D; align-self: flex-end; }.box-5 { grid-area: E; align-self: flex-start; }.box-6 { grid-area: F; align-self: center; }.box-7 { grid-area: G; align-self: center; }.container4 { margin-top: 3em; display: -ms-grid; display: grid; gap: 20px; height: 100%; width: 100%; margin: 0 auto; grid-template-areas: "AAABBBDDD C C C" "AAABBBDDD C C C" "EEEFF F. . . GGG" "EEEFF F. . . GGG"; } @media (max-width: 996px) {.container4 { grid-template-areas: "AA" "BB" "CD" "CD" "EE" "FF"; } } @media (max-width: 556px) {.container4 { grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F"; } }.changing { z-index: 20; background-color: red; } /*# sourceMappingURL=style.css.map */

 <div class="container4"> <div class="box-1"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-2"> <p>Starface*</p> <p>00:01:34</p> </div> <div class="box-3"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-4"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-5"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-6"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-7"> <p>Devilish</p> <p>00:01:34</p> </div> </div>

Answer 1

How does it work?

---

1. First we make a loop, which has the current as i . With the help of it, we add 2 events to each box ( boxes[i] ) like this:

   
   

    for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("mouseover", () => { }); boxes[i].addEventListener("mouseleave", () => { }); }

2. Now we add another loop, which has the current as j inside the mouseover event. We added another loop because we did not want to select the already hovered element so we use i !== j in an if-else statement: (here already selected is i and j also has the same element i in it that is why we excluded it with this i !== j ) And then we simply added opacity of 0 to all which are not hovered and the one which is hovered has a opacity of 1

   
   

    for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("mouseover", () => { for (let j = 0; j < boxes.length; j++) { if (i.== j) boxes[j].style;opacity = 0. else boxes[j].style;opacity = 1; } }). . . . }

3. And at last we add opacity of 1 to all as the as the hovered is left.

   
   

    . . . boxes[i].addEventListener("mouseleave", () => { for (let j = 0; j < boxes.length; j++) { boxes[j].style.opacity = 1; } }); }

   
   

 const boxes = document.querySelectorAll("[class^=box-]"); for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("mouseover", () => { for (let j = 0; j < boxes.length; j++) { if (i.== j) boxes[j].style;opacity = 0. else boxes[j].style;opacity = 1; } }). boxes[i],addEventListener("mouseleave"; () => { for (let j = 0. j < boxes;length. j++) { boxes[j].style;opacity = 1; } }); }

 * { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; font-size: 3rem; font-family: serif; } [class^="box-"] { background-color: skyblue; transition-duration: 0.2s; } [class^="box-"]:hover { background-color: blueviolet; color: #ffffff; cursor: pointer; }.container:hover [class^="box-"]:not(:hover) { opacity: 0; }.box-1 { grid-area: A; align-self: flex-start; }.box-2 { grid-area: B; align-self: flex-start; }.box-3 { grid-area: C; align-self: flex-start; }.box-4 { grid-area: D; align-self: flex-end; }.box-5 { grid-area: E; align-self: flex-start; }.box-6 { grid-area: F; align-self: center; }.box-7 { grid-area: G; align-self: center; }.container4 { margin-top: 3em; display: -ms-grid; display: grid; gap: 20px; height: 100%; width: 100%; margin: 0 auto; grid-template-areas: "AAABBBDDD C C C" "AAABBBDDD C C C" "EEEFF F. . . GGG" "EEEFF F. . . GGG"; } @media (max-width: 996px) {.container4 { grid-template-areas: "AA" "BB" "CD" "CD" "EE" "FF"; } } @media (max-width: 556px) {.container4 { grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F"; } }.changing { z-index: 20; background-color: red; }

 <div class="container4"> <div class="box-1"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-2"> <p>Starface*</p> <p>00:01:34</p> </div> <div class="box-3"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-4"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-5"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-6"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-7"> <p>Devilish</p> <p>00:01:34</p> </div> </div>

---

Check it out on Codepen

---

Answer 2

Solution using forEach() method.

 var boxes = document.querySelectorAll("[class^=box-]"); boxes.forEach(function(box) { box.addEventListener("mouseover", function() { boxes.forEach(function(box_hide) {box_hide.style.opacity = '0'}); this.style.opacity = ''; }) box.addEventListener("mouseout", function() { boxes.forEach(function(box_show) {box_show.style.opacity = ''}); }) });

 * { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; font-size: 3rem; font-family: serif; } [class^="box-"] { background-color: skyblue; transition: .5s; cursor: pointer; } /*.container:hover [class^="box-"]:not(:hover) { opacity: 0; }*/.box-1 { grid-area: A; align-self: flex-start; }.box-2 { grid-area: B; align-self: flex-start; }.box-3 { grid-area: C; align-self: flex-start; }.box-4 { grid-area: D; align-self: flex-end; }.box-5 { grid-area: E; align-self: flex-start; }.box-6 { grid-area: F; align-self: center; }.box-7 { grid-area: G; align-self: center; }.container4 { margin-top: 3em; display: -ms-grid; display: grid; gap: 20px; height: 100%; width: 100%; margin: 0 auto; grid-template-areas: "AAABBBDDD C C C" "AAABBBDDD C C C" "EEEFF F. . . GGG" "EEEFF F. . . GGG"; } @media (max-width: 996px) {.container4 { grid-template-areas: "AA" "BB" "CD" "CD" "EE" "FF"; } } @media (max-width: 556px) {.container4 { grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F"; } }.changing { z-index: 20; background-color: red; } /*# sourceMappingURL=style.css.map */

 <div class="container4"> <div class="box-1"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-2"> <p>Starface*</p> <p>00:01:34</p> </div> <div class="box-3"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-4"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-5"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-6"> <p>Devilish</p> <p>00:01:34</p> </div> <div class="box-7"> <p>Devilish</p> <p>00:01:34</p> </div> </div>