html - 悬停放大表格中的图像

Question

我制作了一个表格，它之间没有任何空间，因为我希望它作为一张地图，当你将鼠标悬停在它上面时会变大。我使用了 W3 学校的 zoom div，但它在我的桌子上不起作用。我认为它与桌子的大小有关，但我真的不知道这是代码

#casti_male {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

/*ZOOM MAPY*/
.zoom {

    transition: transform .08s;
    width: 214px;
    height: 115px;
  }
  
  .zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

<div id="mapa">
        <table id="casti_male" style="width:1495px; height: 804px;" cellspacing="0px;" cellpadding="0px;">
            <tr>
                <td>
                    <div id="zoom"><img src="castimapy-male/obrazky0.png"></div>
                </td>
                <td>
                    <div id="zoom"><img src="castimapy-male/obrazky1.png"></div>
                </td>
                <td>
                    <div id="zoom"><img src="castimapy-male/obrazky2.png"></div>
                </td>
                <td>
                    <div id="zoom"><img src="castimapy-male/obrazky3.png"></div>
                </td>
                
            </tr>
        </table>
    </div>

它更大，但这里是短版本。基本上在悬停时它应该变大而不移动其他任何东西并且仍然像 -这里一样打包在一起

标签： htmlcss

Answer 1

在 Div 中使用 Class 而不是 Id，它应该像魅力一样工作。检查以下代码 -