Question

我有一些数据的矩形表，并且它的字体大小和宽度都非常小（只是盒子形状）每当我将其悬停时，它都会进行转换：scale（6.0）（尺寸变大6倍）例如，我有9个矩形的表，总和最后一个元素位于x = 500px，y = 500px。当它悬停时，它会变大（其大小的6倍），但是当我的鼠标悬停其关闭点501 501或更多时，无论何时我需要悬停元素时，我都希望增加工作半径。我确实将class multi用于元素，当我将鼠标悬停时需要增加其大小。

 const path = require('path');
 exports.config = {
    directConnect: true,
    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
        }
    },
    specs: [
           path.resolve(process.cwd(), './features/**/*.feature')
    ],
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    cucumberOpts: {
        require: [
            path.resolve(process.cwd(), './/features/stepDefinations/stepDefinitions.js')
        ],
        format: 'json:results.json',
    },
    onPrepare: function() {
        browser.ignoreSynchronisation = true;
        browser.manage().timeouts().implicitlyWait(30000);
        browser.manage().window().maximize();
    },
    params: {
        username: 'Admin',
        password: 'Password',
    },
    plugins: [{
    package: require.resolve('protractor-multiple-cucumber-html-reporter-plugin'),
        options:{
        automaticallyGenerateReport: true,
        removeExistingJsonReportFile: true,
        }
    }],
    getPageTimeout: 30000,
    };

Answer 1

如果需要，删除width，height和background属性。还将比例尺更改为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>

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

1 个答案: