在悬停图像上显示文字

Question

我试图在悬停图片上显示文字。问题是图像位于表格中。我看了很多例子，但是当我尝试时，文字会出现在图像下面而不是上面。 在那种情况下我该怎么办？感谢

HTML：

<table>
            <tr>
                <td>
                <img class="table_photo" src="" /> 
                  <p>first text</p>
                </td>
                <td>
                <img class="table_photo" src="" /> 
                </td>   
            </tr>
             <tr>
                <img class="table_photo" src="" /> 
                </td>
                <td>
                <img class="table_photo" src="" /> 
                </td>   
            </tr>
</table>

的CSS：

table   {
    width:590px;
    height:590px;
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;

}
.table_photo    {
    position: relative;
    height: 190px;
    width: 190px;


}

Answer 1

position:absolute以及z-index应该有效。

尝试为文字提供比图像更高的z-index。

Answer 2

表是绝对位置，表格内容（图像与class =“。table_photo”）是位置相对这是错误的。

绝对位置应该在相对位置内使用。并且z-index值应该很高，这是最重要的。

Answer 3

如果没有必要将文字放在HTML中的图像下。这是一个工作片段。

$(".table_photo").hover(function() {
  $(".imgText").show(1000);
});

$(".table_photo").mouseout(function() {
  $(".imgText").hide(1000);
});

table {
  width: 590px;
  height: 590px;
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
}
.imgText {
  display: none;
}
.table_photo {
  position: relative;
  height: 190px;
  width: 190px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p class="imgText">first text</p>
      <img class="table_photo" src="" />
    </td>
    <td>
      <img class="table_photo" src="" />
    </td>
  </tr>
  <tr>
    <td>
      <img class="table_photo" src="" />
    </td>
    <td>
      <img class="table_photo" src="" />
    </td>
  </tr>
</table>

Answer 4

您可以使用css

添加z-index将解决问题

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
table {
  width: 200px;
  height: 200px;
}
td {
  position: relative;
  height: 100px;
  width: 100px;
}
td img {
  width: 100%;
  height: 100%;
}
.table_photo + p {
  position: absolute;
  color: white;
  background: red;
  display: none;
  z-index: 1;
  bottom: 0;
  width: 100%;
}
.table_photo:hover + p {
  display: block;
}

＆＃13;

<table border=1>
  <tr>
    <td>
      <img class="table_photo" src="http://placeimg.com/50/50/any" />
      <p>first text</p>
    </td>
    <td>
      <img class="table_photo" src="http://placeimg.com/50/50/any" />
    </td>
  </tr>
  <tr>
    <td>
      <img class="table_photo" src="http://placeimg.com/50/50/any" />
    </td>
    <td>
      <img class="table_photo" src="http://placeimg.com/50/50/any" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;