我需要向左移动图片并在将鼠标悬停在图片上时缩放它，但我看到令人讨厌的闪烁。
这是我的 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 修复它但到目前为止无济于事。 我做错了什么？
最佳答案
删除 margin-left: -50px; 并将其替换为 translateX(-50px);。
移动具有负边距的元素实际上会移动该 DOM 元素。所以当你悬停时，你的 img 会放大并向左移动 -50px ...所以你悬停的 img 不再悬停，因为它已经向左移动了 50px。所以悬停样式停止应用......然后它回到原来的位置。但是现在你再次悬停它，所以它向左移动 -50 像素，现在你没有悬停等等。这就是你的闪烁循环。
另一方面，Translate 会制作一个“幽灵”副本，让它看起来移动了 -50 像素，但 DOM 元素仍在原地……所以它仍然悬停，即使它看起来移动了 -50 像素离开了。
改变这个:
.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>关于html - 在悬停时缩放和向左移动时防止闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55364570/