MouseOver 展开效果

Posted 2023-02-16

【中文标题】MouseOver 展开效果

【英文标题】：MouseOver expand effect

【发布时间】：2016-08-04 07:04:06

【问题描述】：

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

【问题讨论】：

要求我们建议、查找或推荐书籍、工具、软件库、教程或其他场外资源的问题不属于 Stack Overflow Stack Overflow 的主题

【参考方案1】：

假设有一个 div .element 你想在鼠标悬停时展开

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

这是一个仅 css 的解决方案，低于 css 将是有益的

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

scale的初始值为scale(1,1)，div会随着scale值的增加而扩大。

【参考方案2】：

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

【参考方案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);