當在表格中的圖像上懸停時，顯示不會從「無」改變爲「阻止」

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>