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 ><a href="#">Flex Hover Only</a></div>
<div ><a 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
CodePudding user response:
.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 ><a href="#">Flex Hover Only</a></div>
<div ><a href="#">A Specified</a></div>
</div>