Flexbox link color not following parent's rules

David Wahlstrom 0
Viewed 29

I'm trying to create some Flexbox nav buttons that transition both the background color and the font color at the same time, when using the :hover psuedo class on the flexbox item only(a selector's parent). Currently (and simplified) here is what I have.

HTML:

<div id="flex">
  <div class="item"><a href="#">Flex Hover Only</a></div>
  <div class="item"><a class="special" href="#">A Specified</a></div>
</div>

CSS

body {
  padding: 15px;
  background: black;
}

#flex {
  margin: 0 auto;
  width: 40vw;
  height: 10vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  gap: 10px;
  background: #1C6EA4;
  color: white;
}

.item {
  border: 1px solid blue;
  font-size: 22px;
  border-radius: 8px;
  background: #161616;
  color: white;
  line-height: 10vh;
  padding: 0px 10px;
  transition: .5s;
  transition-delay: .1s;
}

.item a {
  color: white;
  text-decoration: none;
  transition: .5s;
  transition-delay: .1s;
}

.item:hover {
  background-color: #a29bfe;
  color: black !important;
}

.special:hover {
  color: black;
}

Though I can specify the .item link text to change (.special class) when it is more specifically hovered, I want it to transition when its parent .item is hovered. Is this possible, if so what am I missing?

Here is my codepen https://codepen.io/Davex/pen/poVeaye

flexbox parent-child css html
1 Answers

.item:hover .special{ color: black; } hovering on the .item(Parent) but changing properties on the .special

body {
  padding: 15px;
  background: black;
}

#flex {
  width:95vw;
  height: 10vh;
  display: flex;
  align-items:center;
  flex-wrap: nowrap;
  justify-content: space-around;
  gap: 10px;
  background: #1C6EA4;
  color: white;
}

.item {
  border: 1px solid blue;
  font-size: 22px;
  border-radius: 8px;
  background: #161616;
  color: white;
  line-height: 10vh;
  padding: 0px 10px;
  transition:all .5s ease-in-out;
}

.item a {
  color: white;
  text-decoration: none;
  transition:all .5s ease-in-out;
}
.special{
  transition:all .5s ease-in-out;
}

.item:hover {
  background-color: #a29bfe;
  color: black !important;
}

.item:hover .special{
  color: black;
}
<div id="flex">
  <div class="item"><a href="#">Flex Hover Only</a></div>
  <div class="item"><a class="special" href="#">A Specified</a></div>
</div>

UmairFarooq0
Related