CODEWITHSUNDEEP
htmlcss
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2366

Expandable language selection with HTML/CSS

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

enter image description here

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

enter image description here

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.

Upvotes: 1

Views: 226

Answers (1)

UkFLSUI
UkFLSUI

Reputation: 5672

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

Upvotes: 1

Related Questions