css - 导航栏 Windows 8 Metro 应用程序中的 CSS 问题

Question

当鼠标在从左到右移动的图像上时，我们使用 css 将图像放置在 HTML 页面的导航栏中。如何停止那个移动的动画？它应该是恒定的。

这是css代码：

.homebtn1 .win-commandimage {
background-image: url('/images/homeActive.png');      
width:140px;
height:75px;

.mydealsbtn1.win-commandimage {
background-image: url('/images/home2Active.png');     
width:140px;
height:75px;

这是html代码

<button class="homebtn1" data-win-control="WinJS.UI.AppBarCommand" data-win-options="     {id:'home',section:'selection',tooltip:'Home',extraClass:'appbarExtraClass'}">
</button>
<button class="mydealsbtn1" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'mydeals',section:'selection',tooltip:'Mydeals',extraClass:'appbarExtraClass'}">
 </button>

这是鼠标在图像上改变位置时的第一个屏幕截图，您可以检查下一张图像的差异。当鼠标不在图像上时，它会再次从确切位置更改位置。

Answer 1

由于任何选择器中的转换属性，它可能正在移动。尝试添加transition:none;到上面的类。