时间戳

首页 > 解决方案 > 如何增加变换：悬停时缩放半径

html - 如何增加变换：悬停时缩放半径

问题描述

我有一些包含一些数据的矩形表，它的字体大小和宽度非常小（只是盒子形状）每当我将它悬停时，它都会变换：比例（6.0）（大小变大 6 倍）例如我有一个带有 9 的表矩形，总和最后一个元素位于 x = 500px，y = 500px。当它悬停时它变得更大（它的大小的 6 倍），但是当我的鼠标悬停点 501 501 或更多时它关闭时，每当我需要悬停元素时，我想增加该工作半径。我确实使用类 multi 到我需要在悬停时增加大小的元素。

.multi{
    background-color: #ffffff;
    transition: transform .2s; /* Animation */
    border: 1px solid black;
}

.multi:hover {
    transform: scale(6.0);
}

标签： htmlcsshover

解决方案

如果需要，删除宽度、高度和背景属性。还将比例更改为 6.0（我以 1.2 为例）。

.multi {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: transform; /* Safari */
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-property: transform;
    transition-duration: 0.2s;
}

.multi:hover {
    transform: scale(1.2);
}
<div class="multi"></div>

推荐阅读