Question

如何将我的<div>元素增长（并且内容将文本大小更改为更高的元素），当盘旋时？我把它们放在课堂上试了一下：

size: 150%;

和

height: +30px;
width: +30px;

第一次尝试根本不起作用，第二个代码只是使div闪现并部分消失。

Answer 1

CSS3解决方案：

div {
    background: #999;
    width: 200px;
    height: 20px; 
    transition: width 1s;
}

div:hover{
    width: 300px;
}

<div>
    <p>Im content</p>
</div>

http://jsfiddle.net/MrdvW/

Answer 2

使用CSS可以为div添加悬停样式：

div.container {
    width: 80%;
    background-color: blue;
}

div.container:hover {
    width: 100%;
    background-color: red;
}

请参阅此jsFiddle进行演示。

jQuery解决方案

另一个可能对您有用的选项是jQuery。它是一个JavaScript库，可以简化通常需要的功能，例如这个。使用jQuery，您可以轻松地向元素添加悬停效果：

//hover effect applies to any elements using the 'container' class
$(".container").hover(
    function(){ //mouse over
        $(this).width($(this).width() + 30);
    },
    function(){ //mouse out
        $(this).width($(this).width() - 30);
    }
);

请参阅此jsFiddle进行演示。

Answer 3

我为类似的问题做了类似的事情（你可以将比例改为适用于你的任何东西）：

div:hover {
 -webkit-transform: scale(1.1);
 -moz-transform:    scale(1.1);
 -o-transform:      scale(1.1);
 -ms-transform:     scale(1.1);
}

请注意，这会缩放div及其内容，我认为这就是你想要的。

如何在悬停时为元素设置动画

3 个答案: