Question

请访问以下网站（www.capitec.co.za），并用鼠标悬停在主页上的项目上。您会注意到它们会扩展，我想知道如何在我的网站上执行此操作，因为我使用css失败了。它是jquery，javascript和他们使用adobe创建这个请尽可能协助举例。谢谢。

Answer 1

假设您希望在鼠标悬停

上展开div

<div class="element">
    // you content
</div>

.element:hover{
    transform:scale(1.1,1.1);
}

这是一个仅限css的解决方案，而css以下将是有益的

scale(1,1)

比例的初始值为{{1}}，div将根据比例的增加值进行扩展。

Answer 2

根据您需要支持的浏览器，您可以使用transform:scale() css函数，并在要展开的元素的:hover上调用此函数

Answer 3

使用transform: scale CSS扩大对悬停的影响。您可以添加转换css以缓慢缩放，如下所示：

<div class="expand"> Hover me to expand </div>


.expand {
    width: 100px;
    height: 100px;
    background-color: coral;
    margin: 2em;
    padding: 1em;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
}
.expand:hover {

    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
}

MouseOver扩展效果

3 个答案: