1

我想知道将鼠标悬停在元素上时扩展元素大小/缩放的最佳方法是：CSS 还是 jQuery？

我用 CSS 过渡做了这个小提琴，但它没有做我想要的，宽度和高度的大小不平滑且不成比例：

<div></div>

div{

    width: 300px;
    height: 300px;
    background: #aa00aa;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;

    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;

}

div:hover{
    background: #aa00aa;
    height: 400px;
    width: 400px;

}
4

2 回答 2

3

这种过渡使您的盒子更大

transition: width 1s ease-in-out, height 1s ease-in-out;

但是要实现真正的缩放效果，您需要同时将框移到左侧和顶部。像这样http://jsfiddle.net/slash197/FCxfR/14/

于 2013-04-23T09:04:07.447 回答
1

过渡就像任何其他 CSS 规则一样工作。如果你有：

color: red;
color: green;

...颜色是绿色的。在这种情况下，转换仅应用于width. 您可以同时指定：

transition: height 0.3s ease-in-out, width 0.3s ease-in-out;

或作为

transition-property: height, width;
transition-duration: .3s;
transition-timing-function: ease-in-out;

甚至

transition-property: height, width;
transition: .3s ease-in-out;

http://jsfiddle.net/FCxfR/13/

于 2013-04-23T09:05:16.170 回答