所以我有object一个div容器里面。该对象设置了max-width (600px)和max-height (400px)属性。当我将鼠标悬停的对象，该属性设置为none这样的对象width，并height能正确地呈现。但是，将鼠标移出鼠标后，object它会立即将width和height更改为max-width (600px)和max-height (400px)值，一秒钟后会恢复为原始width和height值。
所以，我该怎么办的过渡，使object它的变化width和height顺利，双方，盘旋在它时和鼠标操作出来的时候。
HTML：
<html>
<!-- Blah blah some head tags here. -->
<body>
<div id="c_a">
<object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"></object>
</div>
</body>
</html>
CSS：
html{
font-size: larger;
width: 100%;
height: 100%;
}
#c_a object{
transition: width 1s linear .5s, height 1s linear .5s;
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
-o-transition: width 1s linear .5s, height 1s linear .5s;
-moz-transition: width 1s linear .5s, height 1s linear .5s;
position: relative;
width: 100%;
height: 100%;
max-width: 600px;
max-height: 400px;
vertical-align: text-top;
}
#c_a object:hover{
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
问题是您没有在父元素上指定宽度。
您的宽度百分比object为100％。100％是什么？在这种情况下，它是父元素宽度的100％div。如果父元素没有指定宽度，那么您将遇到此类问题。
解决方案：在包装纸上指定宽度div。
演示：http : //jsfiddle.net/abhitalks/Pv4y4/4/
CSS：
div#c_a { width: 200px; } /* specify width on parent here */
#c_a object {
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
width: 100%;
height: 100%;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
注意：理想情况下，您还可以height在父级上指定。
只要在父级上指定的宽度在div规则范围内max-width，它将正常工作。但是，一旦初始宽度违反或接近max-width规则，则过渡会将其超过max-width，然后将恢复为原始宽度。
问题：单独指定过渡，width并且height仅尝试在这些属性上过渡时将不起作用，因此max-将忽略es。因此有跳跃作用。
解决方案：首先，请勿将max-es指定为none。因为您将图像尺寸增加了200％，所以也将它们指定为200％。其次，按原样指定过渡，但不具有特定属性。这使所有相关属性都得到过渡，并且将在一定程度上帮助缓解该问题。
演示2：http：//jsfiddle.net/abhitalks/Pv4y4/9/
CSS：
html, body { width: 100%; }
div#c_a { width: 60%; }
#c_a object {
-webkit-transition: 1s;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: 200%;
max-height: 200%;
}
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句