Question

如果您现在看到它的工作方式是悬停在图像上，则图像的大小会扩大20％并重叠到表格中。

如何放大图像，同时扩大桌子的尺寸。这是我的代码。

<table border="1">
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
</table>

这是CSS

img:hover {
    border:1px solid #0000ff;
    width:120%;
    height:120%;
}

Answer 1

用于% px，就像这样

img:hover{
     border:1px solid #0000ff;
    width:120px;
    height:120px;
}

<强> Demo

Answer 2

您需要做的是将%转换为px而不是使用position: absolute;，以便您的细胞不会移动

Demo

img:hover{
    border:1px solid #0000ff;
    width:120px;
    height:120px;
    position: absolute;
}

Answer 3

如上所述，你不能使用％。如果你使用％，它将尝试将高度和宽度设置为容器的120％，因此显然无法调整容器的大小，否则它将不得不再次调整图像大小，这显然会无限期地进行。

如果你将图像包装在另一个元素中，即div，它可能会做你正在寻找的东西，但我还没有完成尝试。

编辑：div无效！

图像悬停效果

3 个答案: