这是我的导航栏...当我将鼠标悬停在链接上时,它应该转为普通文本,但它显示的是对角文本....
.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">
<a href="#" class="nav-link navbar-second diagonal"><span>Home</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Classes</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Trainers</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Pricing</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Gallery</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Blog</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Contact</span></a>
</li>
</ul>
</div>
</div>
</nav>
当我们将鼠标悬停在文本上时,它可以正常工作。即我的span
标签..我想在li
标签中使用相同的标签:当我们将鼠标悬停在标签上时获取正常文本。提前致谢 !
你需要打开反转变换(transform: skewX(30deg);
)
.navbar-menu2 li a:hover span
代替
.navbar-menu2 li a span:hover
因为当相关的span
徘徊时,a
并不总是徘徊:
.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">
<a href="#" class="nav-link navbar-second diagonal"><span>Home</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Classes</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Trainers</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Pricing</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Gallery</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Blog</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Contact</span></a>
</li>
</ul>
</div>
</div>
</nav>
试试这个:-
删除: - 来自CSS的transform: skewX(-30deg);
。
.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">
<a href="#" class="nav-link navbar-second"><span>Home</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Classes</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Trainers</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Pricing</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Gallery</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Blog</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link navbar-second"><span>Contact</span></a>
</li>
</ul>
</div>
</div>
</nav>