Question

我需要向左移动图片并将其悬停在图片上，但是我看到一个令人讨厌的闪烁。

这是我的html和CSS：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        th.dt-center, td.dt-center {
            text-align: center;
        }
        .zoom {
            transition: transform .2s;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .zoom:hover {
            transform: scale(2);
            margin-left: -50px;
        }


        thead input {
            width: 100%;
        }

        tfoot {
            display: none;
        }

        img.thumb {
            max-width: 70px;
            max-height: 90px;
        }

    </style>

</head>
<body>


    <br>
    <table class="display" id="products_table-id">
        <thead>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </tfoot>
        <tbody>

            <tr>
                <td>1</td>
                <td>1</td>
                <td><a target="_blank" href=""> 401072</a></td>
                <td>Aquage</td>
                <td></td>
                <td>5999.0</td>
                <td><img class="zoom" alt="" src="https://s3.amazonaws.com/uscimageurls/6002/401072.jpeg"/></td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

我尝试使用此answer对其进行修复，但到目前为止无济于事。我该怎么办？

Answer 1

删除margin-left: -50px;，然后将其替换为translateX(-50px);。

移动具有负边距的元素实际上将移动该DOM元素。因此，当您将鼠标悬停时，您的img会向上缩放并向左移动-50px ...因此，您正在徘徊的img不再徘徊，因为它已向左移动了50px。因此，悬停样式将停止应用...然后返回到原始位置。但是现在您再次将其悬停，因此它向左移动-50px，现在您没有悬停等等。这是您的闪烁循环。

另一方面，翻译会像是制作一个“幽灵”副本并使其看起来已经移动了-50px，但是DOM元素仍然存在...因此，即使它看起来已经移动了-50px，它仍然徘徊左。

更改此：

.zoom:hover {
        transform: scale(2);
        margin-left: -50px;
    }

对此：

.zoom:hover {
        transform: scale(2) translateX(-50px);
    }

* {
            box-sizing: border-box;
        }

        th.dt-center, td.dt-center {
            text-align: center;
        }
        .zoom {
            transition: transform .2s;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .zoom:hover {
            transform: scale(2) translateX(-50px);
        }


        thead input {
            width: 100%;
        }

        tfoot {
            display: none;
        }

        img.thumb {
            max-width: 70px;
            max-height: 90px;
        }

<br>
    <table class="display" id="products_table-id">
        <thead>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </tfoot>
        <tbody>

            <tr>
                <td>1</td>
                <td>1</td>
                <td><a target="_blank" href=""> 401072</a></td>
                <td>Aquage</td>
                <td></td>
                <td>5999.0</td>
                <td><img class="zoom" alt="" src="https://s3.amazonaws.com/uscimageurls/6002/401072.jpeg"/></td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>

防止在缩放和在悬停时向左移动时闪烁

1 个答案: