Question

<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>

我可以做这个吗？也就是说，我可以将#special p扩展到“事物”的顶部吗？正如我目前所设置的那样#special不会超过220px宽的td。有什么想法吗？

Answer 1

我仍然不完全清楚，但试试这个。这将允许TD在显示内容时增长。

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="text-align: right;">
      <div class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>

Answer 2

我不是100％肯定你想要实现的目标，但是哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇不是position: relative元素本身？

这样，您的td元素将位于正常的表流中，弹出的段落将离开表格单元格的边界。

CSS：position：绝对内部位置：相对，但不影响父级？

2 个答案: