Question

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

这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

添加父母，它会解决问题，并在您将鼠标悬停在父

上时应用翻译风格

.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>

Answer 2

Demo

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;
}

Answer 3

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

尝试将元素分隔为父元素和子元素，并在父元素具有:hover时将翻译应用于子元素。您还需要将display: block应用于子项，以确保父元素在子项移动时保持其维度。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

应用css3翻译属性

3 个答案: