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

Question

我有一个图像，当我将鼠标悬停在它上面时我想放大它，但我不想增加悬停接受的区域。 AKA，当我将鼠标悬停在它上面时。我不想做，所以你必须将鼠标移远才能离开该元素。

我没有修改 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 相关吗？

Answer 1

一个可能的路径是在 .image 上使用 position: relative; 和 z-index: -1;，并保持:hover 伪类在 .link 上。我在这里设置了一个演示:http://codepen.io/anon/pen/BLwPEY

我对样式进行了一些改动，但只是为了说明目的。

我不确定您想要的结果是什么(例如，图像保持居中，或者图像大小究竟如何变化)，但这可能是一个开始。请注意，当鼠标悬停在上方或下方时，效果似乎会出现故障(至少对我而言)- 如果您快速将鼠标移开但随后停在图像边缘，则悬停状态似乎会持续存在。不知道为什么，我尝试了几种不同的方法来解决它但没有成功。

无论如何，这可能是一个开始的地方。