代码之家 › 专栏 › 技术社区 › Mohsin

悬停时平行四边形中的倾斜

transform css html

Mohsin · 技术社区 · 6 年前

这是我的导航栏…当我将鼠标悬停在一个链接上时,它应该变成普通文本,但它显示的是斜线文本…

.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 标签:当我们将鼠标悬停在普通文本上时,它就会显示出来。事先谢谢!

2 回复 | 直到 6 年前

Maharkus zok 6 年前

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>

Mr. Roshan 6 年前

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>