css - 悬停时放大元素，但保留原始悬停区域

我有一个图像，当我将鼠标悬停在上面时，我想放大它，但是我不想增加悬停所能接受的区域。又名，当我将鼠标悬停在它上面时。我不想这样做，因此您必须将鼠标移得更远才能离开元素。

我没有修改HTML或使用JavaScript的奢侈功能，因为我正在修改页面的CSS。

这些是我正在使用的元素。

<tbody class="list-item" style="">
    <tr class="list-table-data">
        <td class="data number"/>
        <td class="data image">
            <a class="link sort">
                <!--What I want to enlarge-->
                <img class="hover-info image">
            </a>
        </td>
    </tr>
</tbody>

我尝试了:: before和选择器的多种组合以使其正常工作。通常，结果只是忽隐忽现。

这可能与纯CSS有关吗？

最佳答案

一个可能的追求途径是在position: relative;上使用z-index: -1;和.image，并在:hover上保留.link伪类。我在这里进行了演示：http://codepen.io/anon/pen/BLwPEY

我在样式上采取了一些自由，但仅仅是出于说明目的。

我不确定您想要的结果是什么（例如，图像保持居中，或者图像尺寸确切如何变化），但这可能是一个开始。请注意，将鼠标悬停在上方或下方时，效果似乎是微不足道的（至少对我来说是这样）-如果快速将鼠标移出，然后在图像边缘停顿，则悬停状态似乎仍然存在。不知道为什么，我已经尝试了几种不同的方法来解决它并没有成功。

无论如何，这可能是一个起点。

关于css - 悬停时放大元素，但保留原始悬停区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39819623/