悬停效果车

Question

我真的很难解释，但这是一个gif在徘徊时的样子：

我需要箭头来自左边，当悬停时（不像在gif中）。 当你看到gif时，你会理解我的意思。

这是我的CSS：

.nav-background .nav-content .nav-li {
  list-style: none;
  font-family: "Lato Black", sans-serif;
  text-align: left;
  font-size: 3rem;
  line-height: 1.5em;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.nav-background .nav-content .nav-li a {
  color: #FFF;
  text-decoration: none;
  -webkit-transition-duration: .3s;
}


.nav-background .nav-content .nav-li a:hover {
  background: url("../img/arrow-right-white.png") no-repeat left;
  background-size: 50px;
  padding-left: 50px;
}

如果有人可以提供帮助，我会非常感激！ ：）

Answer 1

您遇到此问题，因为您对所有属性都使用了转换。尝试仅将转换用于背景位置：

-webkit-transition:background-position 1s ease-in;  
-moz-transition:background-position 1s ease-in;  
-o-transition:background-position 1s ease-in;  
transition:background-position 1s ease-in;

fiddle