Question

div自行移动，这是一种我甚至不想要并且没有编码的动作。

这是我的问题：

我正在使用像这样的CSS转换（想要移动背景图像）：

.mobile{
background: url(../img/galaxy.png) no-repeat 70px 32px;
height: 480px;
margin-top: -90px;
margin-bottom: -70px;
position: relative;
}

.mobile.animate {
-webkit-transition: background-position 1s linear;
-moz-transition: background-position 1s linear;
-o-transition: background-position 1s linear;
-ms-transition: background-position 1s linear;
}
.mobile:hover {
background-position: 70px 20px;
}

当我将鼠标悬停在我想要的背景上时，它会起作用，但是，在悬停之前，在页面加载时，div会自动向右和向下移动，如20像素（为什么？）

有一个解决方案有效，没有任何意义，但我不希望它那样。

如果我将以下代码放在html和标签中，它可以正常工作，而不会自动移动：。移动{ background：url（../ img / galaxy.png）no-repeat 70px 32px; 身高：480px; margin-top：-90px; margin-bottom：-70px; 位置：相对; }

此外，如果我将所有代码放在html文件中的标签中，它就可以工作（没有自我移动）。

任何人都知道发生了什么？我将非常感激，谢谢。

Answer 1

我记得我有同样的问题。问题是，首先浏览器将.mobile设置为自己的值，然后他正在阅读CSS。所以他有两个值，他自己和你的css值，这是过渡。通过删除css

来试试

margin-top: -90px;
margin-bottom: -70px;

然后看看浏览器在做什么。

CSS转换，单独移动

1 个答案: