I’m trying to animate a title composed of two part: "HARD" and "WARE", the second one has a more transparent color.
When the mouse is over the "HARD" word the colors are reversed correctly but when the mouse is over the "WARE" word this doesn’t happen, only one color changes.
I have already tried to use the combinators selector but there is no selector for the "previous siblings".
body {
background-color: #171717;
}
#title {
font-size: 10vmax;
font-family: 'Open Sans', Calibri;
}
#hard {
color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-in-out;
}
#hard:hover {
color: rgba(255, 255, 255, 0.18);
}
#hard:hover + #ware {
color: rgba(255, 255, 255, 1);
}
#ware {
color: rgba(255, 255, 255, 0.18);
transition: all 0.3s ease-in-out;
}
#ware:hover {
color: rgba(255, 255, 255, 1);
}
#title span:last-child:hover + #title > span:first-child {
color: rgba(255, 255, 255, 0.18);
}<div id="title">
<span id="hard">HARD</span>
<span id="ware">WARE</span>
</div>
>Solution :
Here’s a solution which uses the :hover state of the parent element in two rules which have combined selectors with the first and last child:
body {
background-color: #171717;
}
#title {
font-size: 10vmax;
font-family: 'Open Sans', Calibri;
}
#hard {
color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-in-out;
}
#ware {
color: rgba(255, 255, 255, 0.18);
transition: all 0.3s ease-in-out;
}
#title:hover span:first-child {
color: rgba(255, 255, 255, 0.18);
}
#title:hover span:last-child {
color: rgba(255, 255, 255, 1);
}<div id="title">
<span id="hard">HARD</span>
<span id="ware">WARE</span>
</div>Addition: Instead of first and last child you could also use the IDs in the selectors:
body {
background-color: #171717;
}
#title {
font-size: 10vmax;
font-family: 'Open Sans', Calibri;
}
#hard {
color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-in-out;
}
#ware {
color: rgba(255, 255, 255, 0.18);
transition: all 0.3s ease-in-out;
}
#title:hover #hard {
color: rgba(255, 255, 255, 0.18);
}
#title:hover #ware {
color: rgba(255, 255, 255, 1);
}<div id="title">
<span id="hard">HARD</span>
<span id="ware">WARE</span>
</div>