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和selectors的组合来使它工作。通常情况下，结果会导致闪烁。

这可以用纯css吗？

Answer 1

当您将鼠标悬停在锚点上时，请尝试放大图像并确保锚点的直径保持不变，并且溢出是可见的。

Answer 2

编辑：对不起，我误读了你的帖子，错过了你只能使用CSS来完成的事实。我调整了我的解决方案以在现有约束内工作。该技术类似，父a使用z-index为＆＃34; over＆＃34; img。我在a添加了边框，因此当您将鼠标悬停在img上时，即使放大了孩子a，也可以看到它仍保持相同的大小。

这对你有用吗？

＆＃13;

a.link > img.hover-info {
  width: 135px;
  height: 155px;
  transition: 500ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
}

a.link {
  display: block;
  width: 135px;
  height: 155px;
  border: 1px solid #000000;
  z-index: 999;
}

a.link:hover > img.hover-info {
  width: 270px;
  height: 310px;
}

＆＃13;

<table>
  <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 src="https://en.wikipedia.org/static/images/project-logos/enwiki.png" class="hover-info image">
            </a>
        </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

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

我对这些风格采取了一些自由，但仅仅是出于示范目的。

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

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

在悬停时放大元素但保留原始悬停区域

3 个答案: