HTMLロールオーバーのテキストと画像が表示されます（テキストは表の内側にあります）

Question

こんにちは私はページを設計しています。クライアントは、テーブルの行の1つにマウスを合わせると画像が表示されるようにします。テーブルの上に画像が表示されず、テーブルの上に浮かび上がるようにする必要はありません。私はここに提供する必要がありますどのくらいのコードを確認していない：あなたは価格に161129から1から何かをロールオーバーするとき

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

ので、画像が上に表示されます。

ありがとうございました！

Answer 1

CSSを使用して、あなたがホバリングしているものの上に何かを表示させることができます.CSSでDOMをトラバースできず、横方向にしか移動できないため、フレックスボックスorderを使用して、あなたがホバリングしている要素の後の要素。

しかし、あなたが1つのことを浮かべていて、そのことの前に来る何かがホバリングに表示されるようにするには、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>