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

以下是TD元素的示例，它具有data-title属性：

 <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>

悬停时显示隐藏文字的

1 个答案: