0

我想使用 CSS3 过渡创建效果。一个 div 应该在鼠标悬停时改变它的宽度和背景颜色。然后在 mouseout 上它应该等待 2 秒，然后回到它的正常宽度和背景颜色。我所做的是hoverclass在鼠标悬停时通过 jQuery 添加一个类，并在鼠标悬停时将其删除。查看小提琴。

我有两个问题。首先，浏览器会以不同的方式解释小提琴。在 Chrome 中一切正常，鼠标悬停时 div 将立即更改其宽度，然后在鼠标移出时等待 2 秒并恢复正常大小。然而，在 Firefox 中，新添加的 hoverclass 将直接用作新的转换规则。所以发生的情况是鼠标悬停动画将在 2 秒后开始。然后在 mouseout 时，该类将被删除，发生的情况是 Firefox 将从中获取转换规则，#test因此 div 将直接恢复到其正常大小而不会延迟。

我注意到的第二件事是，当我尝试为两个属性设置动画时，背景颜色和宽度，当仅对宽度使用新的过渡规则时（如在 hoverclass 中），它将覆盖背景颜色的一个。这是否意味着我必须编写我#test在悬停类中使用的所有转换属性？

4

1 回答 1

2

你把2s错误的css选择器放在了。你真的不需要添加一个额外的类。所以你可以摆脱jQuery。您可以只使用 :hover 过渡。 http://jsfiddle.net/MMKnx/1/

#test
{
    width:100px;
    height:500px;
    background-color:#06F;
    -webkit-transition: background-color .5s ease-in-out,width .5s ease 2s;
    -moz-transition: background-color .5s ease-in-out,width .5s ease 2s;
    -o-transition: background-color .5s ease-in-out,width .5s ease 2s;
    transition: background-color .5s ease-in-out,width .5s ease 2s;
}
#test:hover
{
    -webkit-transition: width .75s ease;
    -moz-transition: width .75s ease;
    -o-transition: width .75s ease;
    transition: width .75s ease;
}
#test:hover
{
    background-color:#96C;
    width:800px;
}
于 2013-04-25T21:50:13.127 回答