apply hover on sibling with same classname

Question

I have the following html structure:

<div class="menu">
    <div class="menu-item">WORK</div>
    <div class="menu-item">HOME</div>
    <div class="menu-item">CONTACT</div>
</div>

and this css

.menu {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

.menu-item {
position: absolute;
color: #fff;
font-size: 128px;
user-select: none;
transition: 200ms ease-in-out;
filter: drop-shadow(100px 100px 0 rgba(0,0,0,0.7)) drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}

.menu-item:hover {
transform: scale(0.9);
filter: drop-shadow(0px 0px 0 rgba(0,0,0,0.3)) drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}

.menu-item:first-child{
color: rgba(255,255,255,0.5);
transform: translate(-200px, -200px);
}

.menu-item:first-child:hover{
color: rgba(255,255,255,1);
transform: translate(-200px, -200px) scale(0.9);
}

.menu-item:last-child{
color: rgba(255,255,255,0.5);
transform: translate(200px, 200px);
}

.menu-item:last-child:hover{
color: rgba(255,255,255,1);
transform: translate(200px, 200px) scale(0.9);
}

.menu-item:hover ~ .menu-item:first-child {
color: rgba(255,255,255,0);
}

The last part is where my problem is. The ~ doesn't seem to affect the first child at all. I also tried space and + but it didn't work either. Any help would be appreciated. Thanks.

CSS doesn't 'go back up' - hovering a menu item can't affect menu items before it. — A Haworth, Jan 02 '22 at 17:02
Could you describe what you want to happen when each of the menu items is hovered? Is it just the first child that you want to disappear? — A Haworth, Jan 02 '22 at 17:06
I want all the other childs that are not hovered to be 0.2 opacity or shrink them or something so that the one hovered will stand out — luis, Jan 02 '22 at 17:35
Why not just sense when the menu is being hovered and change all menu-items to opacity 0.2 and then the menu-item that is being hovered gets set as opacity 1. .menu:hover .menu-item { opacity: 0.2; } .menu:hover .menu-item:hover { opacity: 1; } — A Haworth, Jan 02 '22 at 17:52
@AHaworth Oh now i know what you mean but that wouldnt be possible since i want the middle item to be opacity 1 if it is hovered and if no item at all is hovered. Anyway i found a solution to it. I can post it if you want? — luis, Jan 03 '22 at 21:01

apply hover on sibling with same classname

0 Answers0