Expandable language selection with HTML/CSS

Question

I'm trying to build an expandable language selection element with HTML and CSS. Here is what it looks like initially:

And here is what I want it to look like when you hover over:

My HTML:

.wrapper {
  margin: 20px;
  background-color: lightgray;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 33px;
}

.icon {
  padding: 5px 10px;
  display: none;
}

.icon.active-icon {
  display: inline-block;
}

.icon:hover {
  cursor: pointer;
  display: inline-block;
}

<div class="wrapper">
  <img class="icon active-icon" src="./ua.svg" alt="" />
  <img class="icon" src="./ru.svg" alt="" />
  <img class="icon" src="./en.svg" alt="" />
</div>

For some reason display property does not get changed on hover and the elements that are displayed as none initially, do not appear.

You have a hidden element, and you want it so that when you hover *on that hidden element*, it reveals itself. How does that work? — Niet the Dark Absol, Jul 12 '20 at 07:34
There are 3 elements that have ```icon``` class, one of them has ```active-icon``` class and its ```display``` property is set to ```inline-block``` which makes it visible. Since it also has ```icon``` class I thought that making ```display: inline-block``` for all ```icon``` elements on hover would work — Oleksandr Fomin, Jul 12 '20 at 07:47
No. `.icon:hover` affects only that one specific hovered icon. It doesn't magically affect all `.icon`s - in fact that would be *highly* undesirable. Instead try `.wrapper:hover>.icon` — Niet the Dark Absol, Jul 12 '20 at 07:59

score 1 · Accepted Answer · answered Jul 12 '20 at 08:10

When you are hovering the icon, it doesn't affect all the elements of .icon class, rather it only affects the hovered one. You can set the :hover on your .wrapper class and set inline-block for .icon on hovering wrapper.

.wrapper {
  margin: 20px;
  background-color: lightgray;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 33px;
}

.icon {
  padding: 5px 10px;
  display: none;
}

.icon.active-icon {
  display: inline-block;
}

.wrapper:hover .icon {
  cursor: pointer;
  display: inline-block;
}

<div class="wrapper">
  <img class="icon active-icon" src="https://via.placeholder.com/20/FF0000/000000?text=1" alt="" />
  <img class="icon" src="https://via.placeholder.com/20/00FF00/000000?text=2" alt="" />
  <img class="icon" src="https://via.placeholder.com/20/0000FF/0000000?text=3" alt="" />
</div>

For more in-depth knowledge about this: How to affect other elements when one element is hovered

Expandable language selection with HTML/CSS

1 Answers1