Hiding other divs when hovering one of them

Hey all! As the title mentions, how do I go about this? Thank you in advance!

7 Replies

b1mind•9mo ago

Best of you share an example of what you're trying to do.

Indeed an example would be nice. But if I understand correctly, probably with has() (not fully supported yet, https://caniuse.com/css-has)

.parent:has(.child:hover) > .child:not(:hover){
  opacity: 0;
}

.parent:has(.child:hover) > .child:not(:hover){
  opacity: 0;
}

otherwise, (could be a bit junky if there a margins/gaps between childs, or if there is padding on the parent)

.parent:hover > .child:not(:hover) {
  opacity: 0;
}

.parent:hover > .child:not(:hover) {
  opacity: 0;
}

or, with JavaScript

naman•9mo ago

<div id="project-row" class="flex center space-even w-3">
  <a href="./money-me.html" class="interactable project self-start" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-2-3" src="./images/money-me/Project-Cover.webp">
      </div>
    </div>
    <h2 id="project-cta">money.me</h2>
  </a>
  <a href="./tsn.html" class="interactable project self-end" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-3-4" src="./images/tsn/cover.webp" alt="Decentralized news platform for the people, by the people.">
      </div>
    </div>
    <h2 id="project-cta">Sage</h2>
  </a>
  <a class="interactable project self-center" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-16-10" src="./images/covihelp/cover.webp">
    </div>
    </div>
    <h2 id="project-cta">Covihelp</h2>
  </a>
  <a href="./aspen.html" class="interactable project self-end" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-16-10" src="./images/aspen/Project cover.webp">

      </div>
    </div>
    <h2 id="project-cta">Aspen</h2>
  </a>
</div>

<div id="project-row" class="flex center space-even w-3">
  <a href="./money-me.html" class="interactable project self-start" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-2-3" src="./images/money-me/Project-Cover.webp">
      </div>
    </div>
    <h2 id="project-cta">money.me</h2>
  </a>
  <a href="./tsn.html" class="interactable project self-end" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-3-4" src="./images/tsn/cover.webp" alt="Decentralized news platform for the people, by the people.">
      </div>
    </div>
    <h2 id="project-cta">Sage</h2>
  </a>
  <a class="interactable project self-center" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-16-10" src="./images/covihelp/cover.webp">
    </div>
    </div>
    <h2 id="project-cta">Covihelp</h2>
  </a>
  <a href="./aspen.html" class="interactable project self-end" data-type="project">
    <div class="image-capusle">
      <div id="project-img" class="overflow-hidden">
      <img class="aspect-16-10" src="./images/aspen/Project cover.webp">

      </div>
    </div>
    <h2 id="project-cta">Aspen</h2>
  </a>
</div>

When hover on one of the links, I am trying to make the opacity of the others 0

Zoë•9mo ago

It would help if you create a pen https://pen.new/ which makes it easier to play around and see what you've attempted

CodePen

...

MarkBoots•9mo ago

well, in this case #project-row is the parent, and the .project are the childs. so you could try the 2 options I gave you before alternative, you could do it with javascript

naman•9mo ago

The first one worked! Thanks a lot

MarkBoots•9mo ago

but, keep in mind. It will not work in FF yet

Gaming

Programming

Hiding other divs when hovering one of them