Currently facing an issue with my Navbar items having underline animation on hover. Once clicked, the animation persists. However, when hovering over a neighboring navbar item, the underlines appear next to each other, creating the illusion of one long line. View example
For instance, when 'product' is focused and 'prices' is hovered over, I would like the focus to shift from 'product' to 'prices'. If 'prices' is not selected, then focus should return back to 'product'. See code snippet below
.underline:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #52ae49;
border-radius:3px;
margin-top: -10px;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.underline:hover:before {
visibility: visible;
display: block;
transform: scaleX(1);
}
.underline:focus:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #52ae49;
border-radius:3px;
margin-top: -10px;
visibility: visible;
display: block;
transform: scaleX(1);
}
It seems like JavaScript and using .forEach will be needed to handle this situation. I attempted the following:
function mouseOver() {
$(".underline").each(function() {
$(this).blur('focus');
});
}
function mouseOut() {
$("underline").each(function() {
$(this).addClass('focus');
});
}
Unfortunately, this approach was unsuccessful.