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>

它更大，但是这里是短版。基本上在悬停时它会变大，而不会移动其他任何东西，并且仍然像-here

Answer 1

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

悬停放大表格中的图像

1 个答案: