悬停时显示隐藏文本的 CSS

Question

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

这是 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);
} 

下面是一个带有 data-title 属性的 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>