如何在鼠标悬停上将表格单元格放大到其背景图像的大小？答案

【问题标题】：How to onmouseover enlarge a table cell to the size of its background image?如何在鼠标悬停上将表格单元格放大到其背景图像的大小？
【发布时间】：2016-03-26 16:20:57
【问题描述】：

我设置了一个图片库，其中图片部分显示在每个单元格中（作为预览）作为单元格背景。当鼠标移到单元格上时，单元格会扩大到整个图片的大小。我想知道是否有一种方法可以自动将单元格调整为图像尺寸，而不是手动将完整尺寸输入为鼠标悬停时单元格的高度和宽度。我已经尝试将 height='200px' 替换为 height=auto 或 height=100% 但似乎都不起作用。

下面是代码示例：

<table cellpadding="0" border="0">  
        <tr>
            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/1.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/2.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/3.jpg"></td>
       </tr>
</table>

【问题讨论】：

一行中有 3 个 td（单元格）。如果增加一个单元格的高度，该行上其他单元格的高度也会增加。这将影响背景图像的。您可以使用 background-position: center center 创建一个显示背景的默认样式；还有一个 :hover 样式来增加单元格大小。您可以使用背景尺寸：包含；以适应悬停的单元格。
玩过这段代码，我发现了一个有趣的效果。我会将我的测试代码粘贴到答案中，以便使用它。（您必须提供自己的图片）。

标签： html css

【解决方案1】：

您可能想看看或尝试一下 transform :scale(); （无碰撞效果）

table {
  table-layout:fixed;
  margin:auto;
  width:550px;
  }
td {
  width:275px;
  height:200px;
  background:url(http://dummyimage.com/400x268) center no-repeat;
  transition:0.25s;
  box-shadow:inset 0 0 0 2px;
  }
td:hover {
  background-size:  100% 100%;
  transform:scale(1.4545,1.34);
  transform-origin:center;
  }
body {
  text-align:center;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>
<img  src="http://dummyimage.com/400x268" />

【讨论】：

【解决方案2】：

您可能需要考虑使用 javascript 来执行此操作。

如果是这样，您可以将 onmouseover 和 onmouseleave 事件更改为...

onmouseover="function1(this);" 和 onmouseleave="function2(this);"

然后在 javascript 中使用它来改变元素的宽度和高度属性...

function1(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '400px';
    document.getElementById(elementID).style.height = '268px';
}
function2(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '275px';
    document.getElementById(elementID).style.height = '200px';
}

请注意，您必须为每个 td 元素指定一个唯一的 ID。

因此，使用 ids 和函数，您的 html tds 将如下所示...

<td id="cell1" width="275px" height="200px" onmouseover="function1(this);" style="background-repeat: no-repeat;" 
class="fx" onmouseleave="function2(this);" align="center" background="images/kitchen/1.jpg"></td>

要在 javascript 中获取元素的 id，您可以使用...

var elementID = elem.id;

希望对您有所帮助，如果您有任何问题，请告诉我。

【讨论】：

【解决方案3】：

有趣的效果：（我会使用比 css 中使用的尺寸更大的图像）

<html>
<head>
<title>Css and Html Test</title>
<style>
table tr td {
    width: 275px;
    height: 200px;

    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
}
table tr td:hover {
    width: 400px;
    height: 268px;
    background-size: contain;
}
</style>
</head>

<body>

<table cellpadding="0" border="0">  
        <tr>
            <td class="fx" background="image1.jpg"></td>
            <td class="fx" background="image2.jpg"></td>
            <td class="fx" background="image3.jpg"></td>
       </tr>
</table>

</body>
</html>

【讨论】：

但是您仍然需要手动输入完整的图像尺寸。这样做的目的是能够使用不同尺寸的图像，并且代码仍然可以正常工作（在鼠标悬停时显示完整图像）
您可能需要使用脚本来获取每个图像的单独尺寸。看看这个帖子：stackoverflow.com/questions/5190069/…

【解决方案4】：

onmouseover 和 onmouseleave 属性应该包含脚本，而不是样式。如果您想使用样式来完成这项工作，请创建 css 样式 fx 和 fx:hover，并将所有样式从标记属性移到类中。

<style>
    .fx {
      border: 0;
      background-repeat:no-repeat;
      background-position: center;
      width: 125px;
      height: 125px;
    }
    .fx:hover {
      width: 250px;
      height: 250px;
    }
</style>

如果您不想对图像大小进行硬编码，并且不想在悬停时看到整行和整列展开，则需要深入研究 javascript 和其他带有 div 层的薄问题。

【讨论】：

行的其余部分也可以在悬停时扩展