CODEWITHSUNDEEP
htmlcss
user1497119
user1497119

Reputation: 473

Display inline - overflow visible opacity

I have a table which should not have multi-lines. So I was thinking of forcing the overflow being hidden and make overflow visible it on hover. However, the other text is still shining through the visible overflow. Is there a way to prevent this?

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>

Upvotes: 2

Views: 107

Answers (1)

Pete
Pete

Reputation: 58432

You could add a z-index on hover (as well as your background-colour on the span):

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>

Upvotes: 5

Related Questions