html - 悬停CSS以显示隐藏文本

Question

我在相关问题中看到了一些其他的方法来做到这一点，但这是我前一段时间的方法，它以前有点用，但现在根本没有用。我有一张大 table ，最后一列是图像，所需的行为是它在悬停时显示文本。

这是 CSS:

#freebie-table td[data-title]:hover:after {
   content: attr(data-title);
   padding: 4px 8px;
   color: #333;
   position: absolute;
   left: 70%;
   top: 100%;
   width: 150px;
   height: 200px;
   z-index: 20;
   /*white-space: nowrap; */
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 4px #222;
   -webkit-box-shadow: 0px 0px 4px #222;
   box-shadow: 0px 0px 4px #222;
   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
   background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
} 

这是一个具有数据标题属性的 TD 元素的示例:

 <td data-title="THIS TEXT IS SUPPOSED TO APPEAR ON HOVER"><img src="images/click2read.png" alt="click 2 read" height="38" width="33" /></td> 

知道为什么这不起作用。如果没有人回答，我会尝试我猜的 jquery 方式。

Answer 1

如果没有看到您的其余代码，很难判断，但看起来该元素可能会出现在您预期的任何位置之外。悬停时显示的此元素的 top 值为 100%。如果您将 position: relative 添加到 td，隐藏的东西将出现在 td 的正下方。还要确保表 ID 是 #freebie-table。

#freebie-table td[data-title]:hover:after {
   content: attr(data-title);
   padding: 4px 8px;
   color: #333;
   position: absolute;
   left: 70%;
   top: 100%;
   width: 150px;
   height: 200px;
   z-index: 20;
   /*white-space: nowrap; */
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 4px #222;
   -webkit-box-shadow: 0px 0px 4px #222;
   box-shadow: 0px 0px 4px #222;
   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
   background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
} 

#freebie-table td {
  position: relative;
}

<table id="freebie-table">
  <tr>
  <td data-title="THIS TEXT IS SUPPOSED TO APPEAR ON HOVER"><img src="images/click2read.png" alt="click 2 read" height="38" width="33" /></td>
  </tr>
</table>