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
b1mind14mo ago
Best of you share an example of what you're trying to do.
MarkBoots
MarkBoots14mo ago
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
naman14mo 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ë
Zoë14mo 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
MarkBoots14mo 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
naman14mo ago
The first one worked! Thanks a lot
MarkBoots
MarkBoots14mo ago
but, keep in mind. It will not work in FF yet
Want results from more Discord servers?
Add your server