Changing hovering behavior in scss - html

Question

How can I make the "Menu" Button remain in hover as long as the mouse/pointer remains in the menu? When the pointer points on Twitter for example I want the menu button to show Home.
Like this:
And not like this:
This is the Codepen example: https://codepen.io/fotios_tragopoulos/pen/YzWyZJj
This is the code:
body {
background-color: #010101;
color: rgba(255, 255, 255, 0.7);
font-family: 'Lato', sans-serif;
margin: 20px;
}
.menu {
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
display: inline-block;
cursor: pointer;
pointer-events: none;
position: absolute;
bottom: 20px;
left: 20px;
&:hover {
pointer-events: all;
.spacer {
&:before {
width: 100%;
transition-delay: 0s;
}
}
.item {
opacity: 1;
top: 0px;
&:nth-child(1) {
transition-delay: 0.25s;
}
&:nth-child(2) {
transition-delay: 0.3s;
}
&:nth-child(3) {
transition-delay: 0.35s;
}
&:nth-child(4) {
transition-delay: 0.4s;
}
&:nth-child(5) {
transition-delay: 0.45s;
}
&:nth-child(6) {
transition-delay: 0.5s;
}
&:nth-child(7) {
transition-delay: 0.55s;
}
&:nth-child(8) {
transition-delay: 0.6s;
}
&:nth-child(9) {
transition-delay: 0.65s;
}
&:nth-child(10) {
transition-delay: 0.7s;
}
}
}
}
.label {
display: inline-block;
cursor: pointer;
pointer-events: all;
}
.spacer {
display: inline-block;
width: 80px;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
cursor: pointer;
position: relative;
&:before {
content: "";
position: absolute;
border-bottom: 1px solid #ffffff;
height: 1px;
width: 0%;
transition: width 0.25s ease;
transition-delay: 0.7s;
}
}
.item {
position: relative;
display: inline-block;
margin-right: 30px;
top: 10px;
opacity: 0;
transition: opacity 0.5s ease, top 0.5s ease;
transition-delay: 0;
&:hover {
span {
color: #ff0000;
}
}
&:nth-child(1) {
transition-delay: 0.45s;
}
&:nth-child(2) {
transition-delay: 0.4s;
}
&:nth-child(3) {
transition-delay: 0.35s;
}
&:nth-child(4) {
transition-delay: 0.3s;
}
&:nth-child(5) {
transition-delay: 0.25s;
}
&:nth-child(6) {
transition-delay: 0.2s;
}
&:nth-child(7) {
transition-delay: 0.15s;
}
&:nth-child(8) {
transition-delay: 0.1s;
}
&:nth-child(9) {
transition-delay: 0.05s;
}
&:nth-child(10) {
transition-delay: 0s;
}
}
span {
transition: color 0.5s ease;
}
.btn-flip {
opacity: 1;
outline: 0;
color: #fff;
line-height: 40px;
position: relative;
text-align: center;
letter-spacing: 1px;
display: inline-block;
text-decoration: none;
font-family: 'Open Sans';
text-transform: uppercase;
&:hover {
&:after {
opacity: 1;
transform: translateY(0) rotateX(0);
}
&:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
}
&:after {
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: #323237;
display: block;
transition: 0.5s;
position: absolute;
background: #adadaf;
content: attr(data-back);
transform: translateY(-50%) rotateX(90deg);
}
&:before {
top: 0;
left: 0;
opacity: 1;
color: #adadaf;
display: block;
padding: 0 30px;
line-height: 40px;
transition: 0.5s;
position: relative;
background: #323237;
content: attr(data-front);
transform: translateY(0) rotateX(0);
}
}
<div class="menu">
<div class="spacer"></div>
<div class="item"><span>Twitter</span></div>
<div class="item"><span>Instagram</span></div>
<div class="item"><span>Flickr</span></div>
<div class="item"><span>Behance</span></div>
<div class="item"><span>MixCloud</span></div>
</div>

Answer 1

You can add the same rules inside .menu:
.menu {
...
&:hover {
.btn-flip {
&:after {
opacity: 1;
transform: translateY(0) rotateX(0);
}
&:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
}