0

该表有两行一列。每个字段都有一个背景图像（50px 高度）和另一个用于悬停效果的图像，即第一个字段 100px 和第二个 50px。

我的问题与这种效果有关。当您将鼠标悬停在第一个字段上以显示 100ps 的图像时，它会在不移动表格的情况下覆盖第二个字段？

我试过了，但它只扩展了第一个字段的高度，而没有覆盖第二个字段。

<html>
  <head>
    <style>
      table {border: none;}
     .one:hover {background-image: url('1.jpg'); height: 100px; }
     .two:hover { background-image: url('2.jpg');}
   </style>
  </head>
  <body>
    <table cellspacing="0" cellpadding="0">
     <tr style="background: url(td-one.jpg);" width="200" height="50" >
       <td  class = "one">Firstname</td>
     </tr>
     <tr style="background: url(td-two.jpg);" width="200" height="50">
       <td class = "two" >Lastname</td>
     </tr>
   </table>
 </body>
</html>
4

1 回答 1

0

<td>永远不会脱离结构（行高），因此<tr>它永远不会覆盖它下面的单元格。您需要在<div>每个单元格中添加一个，.one并且.two.

然后改变的高度<div>和玩float:left这个<div>可能会呈现你想要的。

于 2013-09-18T20:24:22.133 回答