Skew in parallelogram on hover - html

Question

This is my navbar... When I hover over a link it should turn to normal text but it is showing me diagonal text....
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: red;
transform: skewX(-30deg);
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a span:hover{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
It works fine when we hover over the text. i.e my span tag.. I want the same in li tag: get normal text when we hover over it.
Thanks in advance !

Answer 1

You need to put the reversed transform (transform: skewX(30deg);) on
.navbar-menu2 li a:hover span
instead of
.navbar-menu2 li a span:hover
because the span doesn't always get hovered when the related a is hovered:
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: red;
transform: skewX(-30deg);
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a:hover span{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>

Answer 2

Try this:-
Remove:- transform: skewX(-30deg); from your CSS.
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: #f0f0f0;
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a span:hover{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>