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翻转文本和图像出现（文本在表格内）

回答

相关问题