Question

考虑这个简单的html页面：

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <div><form></form>                      
        </div><br>

        <div>some text</div>
    </body>
</html>

test.css文件包含：

div {
  -webkit-transition: background-color 6s ease;
  transition: background-color 6s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

在Chrome中加载或刷新页面时，您可以看到从灰色到红色的转换。如果删除表单元素，div将按预期启动为红色。如何在没有javascript / jquery的情况下修复此问题？

编辑：不要使用jsfiddle或codepen或类似的东西。问题出在页面加载上。这些不是整页加载。

Answer 1

原来这是一个Chrome错误：

https://code.google.com/p/chromium/issues/detail?id=167083

https://code.google.com/p/chromium/issues/detail?id=332189

Answer 2

<强> Demo

在div中添加转换：如果您希望在悬停时进行转换，请悬停。

div {
    background-color: red;
}
div:hover {
    background-color: green;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

<强> Demo

这将有助于

CSS

div {
    background-color: red;
    -webkit-transition: background-color 1s ease-in-out;
       -moz-transition: background-color 1s ease-in-out;
        -ms-transition: background-color 1s ease-in-out;
         -o-transition: background-color 1s ease-in-out;
            transition: background-color 1s ease-in-out;
}
div:hover {
    background-color: green;
}

Answer 3

演示：http://codepen.io/mouhammed/pen/Hwina

你可以在悬停和鼠标离开时使用它：

div {
  background-color: red;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
div:hover {
    background-color: green;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

html中表单的存在使得css转换发生在chrome的加载中

3 个答案: