内联显示-溢出可见不透明度

Question

我有一个不应包含多行的表格。所以我当时想强迫溢出隐藏起来，使溢出在悬停时可见。但是，其他文本仍然通过可见的溢出闪闪发光。有办法防止这种情况吗？

https://jsfiddle.net/60mj7gqb/1/

<table>
  <tr>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px; overflow: hidden">
        <span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
      </div>
    </td>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px; overflow: visible">
        <span style="white-space: nowrap; padding: 5px; background: #afffcf">myPreciousText is located here</span>
      </div>
    </td>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px; overflow: hidden">
        <span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
      </div>
    </td>
  </tr>
</table>

Answer 1

您可以在悬停时添加一个z索引（以及跨度上的背景色）：

div {
  overflow: hidden;
}

div:hover {
  position: relative;
  z-index: 1;
  overflow: visible;
}

div:hover span {
  background: #afffcf;
}

<table>
  <tr>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px; ">
        <span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
      </div>
    </td>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px; ">
        <span style="white-space: nowrap; padding: 5px; ">myPreciousText is located here</span>
      </div>
    </td>
    <td style="height: 30px; width: 100px; border: 1px solid grey;">
      <div style="width: 100px;">
        <span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
      </div>
    </td>
  </tr>
</table>