时间戳

首页 > 解决方案 > 防止在缩放和悬停时向左移动时闪烁

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

问题描述

我需要将图片向左移动并在将鼠标悬停在其上时对其进行缩放，但我看到了令人讨厌的闪烁。

这是我的 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>

我尝试使用此答案修复它，但到目前为止无济于事。我做错了什么？

标签： htmlcss

解决方案

删除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>

推荐阅读