应用 CSS3 翻译属性

我将翻译属性应用于链接。 translate-y(-50px);悬停，它工作正常。但是当我将鼠标悬停在图像上时，它会反转其动画，就像我第一次将鼠标悬停在图像上时一样，它会转换为 y -50px，但问题是当我将鼠标从它移开时，它会再次转换为 y -50px;

这是我的代码

.nav{
  background-color:red;
  padding:10px;
  font-size:20px;
  transition:0.5s all;
  margin-top:80px;
}
.nav:hover{
  transform:translatey(-50px);
}

<html>
  <head></head>
  <body>
    <a href="#" class=nav>Home</a>
  </body>
</html>

添加父级，当您将鼠标悬停在父级上时，它将解决问题并应用翻译样式

.parent {
  border: 1px solid green;
  display: inline-block;
}
.nav {
  background-color: red;
  padding: 10px;
  font-size: 20px;
  transition: 0.5s all;
  display:block;
}
.parent:hover .nav {
  transform: translatey(-50px);
}

<div class="parent">
  <a href="#" class=nav>Home</a>
</div>

演示

.html

<div class="navContainer">
    <a href="#" class="nav">Home</a>
</div>

.css

.navContainer {
    transition:0.5s all;
    display:inline-block;
}
.navContainer:hover .nav {
    transform:translatey(-50px);
}
.nav {
    display:block;
    transition:0.5s all;
    background-color:red;
    padding:10px;
    font-size:20px;
}

问题是当元素移动时，光标不再悬停在其上，因此:hover伪类不适用。解决此问题的最简单方法是将要移动的元素与将悬停在上面的元素分开。

尝试将元素分为父元素

和子元素，并在父元素:hover时将翻译应用于子元素。您还需要将display: block应用于子元素，以确保父元素在子元素移动时保持其尺寸。

.nav{
  display: inline-block;
}
.nav > span{
  display: block;
  background-color: red;
  padding: 10px;
  font-size: 20px;
  transition: 0.5s all;
}
.nav:hover > span{
  transform: translatey(-50px);
}

<a href="#" class=nav><span>Home</span></a>

相关内容

最新更新

热门标签：