我制作了一个表格,它之间没有任何空间,因为我希望它作为一张 map ,当您将鼠标悬停在它上面时它会变大。我使用过 W3 学校的 zoom div,但它在我的 table 上不起作用。我认为它与表格的大小有关,但我真的不知道这是代码
#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 一样打包在一起
最佳答案
在 Div 中使用 Class 而不是 Id,它应该会很有魅力。检查以下代码--
关于html - 悬停放大表格中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54817405/