将鼠标悬停在表

Question

标题几乎说明了一切。我基本上想要悬停在图像上，并在底部像名称一样淡入淡出。只是它没有这样做。

以下是代码：https://jsfiddle.net/Ltb8a7cc/

这是有问题的CSS：

    .productIconName {
  text-align: center;
  font-family: sans-serif;
  font-size: 16px;
  color: #158538;
  animation: fadein 500ms;
  display: none;
}

    .productIconImage:hover ~ .productIconName {
  display: block;
}

第二行的html没有显示悬停时的文字：

    <td class=productIconName>
    Name
    </td>

Answer 1

如果您将.productIconName放在与.productIconImage相同的td元素中，则会有效。

    .productIconImage {
      width: 150px;
      border: solid;
      border-radius: 3px;
      border-color: #F1F1F1;
      display: block;
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      transition: border 500ms ease-out
    }
    
    .productIconName {
      text-align: center;
      font-family: sans-serif;
      font-size: 16px;
      color: #158538;
      animation: fadein 500ms;
      display: none;
    }
    
    @keyframes fadein {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .productIconImage:hover {
      border-color: #C3C3C3;
    }
    
    .productIconImage:hover ~ .productIconName {
      display: block;
    }

<table style=width:100%;>
  <tr>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
  </tr>
</table>

如果使用显示，当标题可见时，图像将会跳转。如果使用不透明度而不是显示，它们将不会跳转，您只需转换即可替换动画。

    .productIconImage {
      width: 150px;
      border: solid;
      border-radius: 3px;
      border-color: #F1F1F1;
      display: block;
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      transition: border 500ms ease-out
    }
    
    .productIconName {
      text-align: center;
      font-family: sans-serif;
      font-size: 16px;
      color: #158538;
      transition: 500ms;
      opacity: 0;
    }
    
    .productIconImage:hover {
      border-color: #C3C3C3;
    }
    
    .productIconImage:hover ~ .productIconName {
      opacity: 1;
    }

<table style=width:100%;>
  <tr>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
    <td>
      <img src=https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png class=productIconImage>
      <div class=productIconName>
        Name
      </div>
    </td>
  </tr>
</table>