Question

我设置了一个图库，其中图片在每个单元格（作为预览）中部分显示为单元格背景。当鼠标在单元格上移动时，单元格会扩展到整个图片的大小。我想知道是否有办法自动将单元格大小调整为图像尺寸，而不是手动将整个尺寸作为鼠标悬停在单元格的高度和宽度上。我已经尝试将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>

感谢您的帮助！

Answer 1

你可能想看看或试试transform：scale（）; （没有撞击效果）

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 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。

所以使用id和函数你的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;

我希望这会有所帮助，如果您有任何问题，请与我联系。

Answer 3

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层的细节。

Answer 4

有趣的效果:(我会使用大于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>

如何onmouseover将表格单元格放大到它的背景图像大小？

4 个答案: