Question

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

我的问题与此效果有关。当您将鼠标悬停在第一个字段上以显示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>

Answer 1

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

然后更改<div>的高度并在此float:left上使用<div>进行游戏，可能会显示您想要的内容。

悬停效果覆盖另一个字段

1 个答案: