从左向外向右滑动 CSS 背景

Question

我试图在将鼠标悬停在它上面时从左侧进行背景滑入，但是当不再悬停时，我不希望它回到左侧，我希望它向右移动。我按照这里的说明写了这个：

#wsite-menus .wsite-menu li a {
background-position: 0 0 !important;
background-size: 200% 100% !important;
background-image: linear-gradient(to right, #1e1e1e 50%, #00b050 50%) !important;
-webkit-transition: background-position 0.4s !important;
-moz-transition: background-position 0.4s !important;
transition: background-position 0.4s !important;
}
#wsite-menus .wsite-menu li a:hover {
background-position: -100% 0 !important;
}

我可以添加什么以使背景向另一个方向滑出？抱歉，如果这是一个每个人都知道答案的愚蠢问题，但我远非 CSS 专家。提前感谢！

Answer 1

我会做一些JS，在链接的mouseleave事件上添加一个类。该类将包含一个新的过渡，该过渡会将图像向右滑出，这将覆盖原始过渡。