html - 在表格行悬停时调整图像大小

Question

将鼠标悬停在表格行上时，是否可以更改下面的代码以扩展图像？目前，它设置为在将鼠标悬停在独立图像上时重新调整为更大的版本。

//HTML

<tr>
<td><img class="bigpic" src="pic.png"></td>
<td>information</td>
<td>information</td>
<td>information</td>
</tr>

//CSS

.bigpic:hover {
    width: 45px;
    height: 55px;
}

Answer 1

尝试这个：

tr:hover .bigpic {
    width: 45px;
    height: 55px;
}

因为hoversudo 类应用于表格行并且bigpic是 a 的后代tr，所以您所要做的就是为悬停行的后代添加规则。

虽然这有调整整行大小的缺点，但它会使你的桌子变得丑陋。我建议在表格单元格中放置一个 div 并绝对定位图像。这样当您悬停时它会“弹出”行。

这是我对 div 和弹出的建议的示例和示例