HTML翻轉文本和圖像出現（文本在表格內）

-2

您好我正在設計一個頁面，我的客戶希望圖像在您將鼠標懸停在表格中的某一行上時顯示。我們不希望圖像出現在表格內，只是浮在它上面。我不知道我應該多少代碼在此處提供：HTML翻轉文本和圖像出現（文本在表格內）

<div class="tg-wrap"><table id="tg-VGIE9" class="tg"> 
    <tr> 
    <th class="tg-yw4l">Item #</th> 
    <th class="tg-yw4l">Product Family</th> 
    <th class="tg-yw4l">Item Description</th> 
    <th class="tg-yw4l">Price</th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l">161129-1</td> 
    <td class="tg-yw4l">Accessory</td> 
    <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td> 
    <td class="tg-yw4l">$189.94</td> 
</tr> 
</table></div>

所以，當你翻轉從161129-1什麼價格時，圖像會出現以上。

謝謝你的幫助！

來源

2017-03-16 NDD

你要告訴我們什麼你已經工作，並試圖到目前爲止，這樣我們就可以幫您解決。我們不是在這裏爲您編寫全部新功能。 –

呃，好吧。我真的不知道該怎麼說。我的意思是，如果你不能幫我猜，就不要回應。 – NDD

使用CSS讓東西出現在你懸停的東西上面，因爲你不能在CSS中遍歷DOM並只能遍歷，你可以使用flexbox和order直觀地重新定位東西，同時仍然保留元素在你徘徊的元素之後。

但是，如果你在一件事情上徘徊，並且你希望在事物懸停前顯示一些東西，javascript可能是更好的解決方案。

* {margin:0;} 
 
tbody { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.img { 
 
    display: none; 
 
    order: -1; 
 
} 
 
tr:hover + .img, tr:hover { 
 
    display: flex; 
 
}

<div class="tg-wrap"> 
 
    <table id="tg-VGIE9" class="tg"> 
 
    <tbody> 
 
    <tr> 
 
     <th class="tg-yw4l">Item #</th> 
 
     <th class="tg-yw4l">Product Family</th> 
 
     <th class="tg-yw4l">Item Description</th> 
 
     <th class="tg-yw4l">Price</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l">161129-1</td> 
 
     <td class="tg-yw4l">Accessory</td> 
 
     <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td> 
 
     <td class="tg-yw4l">$189.94</td> 
 
    </tr> 
 
    <tr class="img"> 
 
     <td colspan="4"> 
 
     <figure> 
 
      <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg"> 
 
     </figure> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l">161129-1</td> 
 
     <td class="tg-yw4l">Accessory</td> 
 
     <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td> 
 
     <td class="tg-yw4l">$189.94</td> 
 
    </tr> 
 
    <tr class="img"> 
 
     <td colspan="4"> 
 
     <figure> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
     </figure> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-03-16 20:07:12

我會在週末的某個時候嘗試一下，看看它是否適合我。感謝您的建設性幫助！ – NDD

HTML翻轉文本和圖像出現（文本在表格內）

回答

相關問題