表：如何在单行鼠标悬停时更改图片？答案

【问题标题】：Table: how to change pictures on mouseover on single rows?表：如何在单行鼠标悬停时更改图片？
【发布时间】：2015-08-18 06:07:13
【问题描述】：

我在网站上工作，我必须创建一个带有鼠标悬停效果的表格，只有当您将鼠标放在图片上并且仅在 PDF 图标上时才会产生这种效果。

我现在需要的是当您在单个表格行上使用鼠标时应用此效果。我该怎么做？

HTML：

<td class="thumbnail-item" data-th="PDF"><a href="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/QH001_LadenMIETEN_SalmenparkBusiness.pdf" target="_blank"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24"> </a>
      <div class="tooltip">
        <img src="qh_1.png" alt="" width="570" height="403" />
        <span class="overlay"></span>
        
        <span class="overlay"></span>
    </div></td>

CSS：

  .thumbnail-item {
/* position relative so that we can use position absolute for the    tooltip */
display: inherit;
height: 10px;
max-width: 5px;

}

.thumbnail-item a {
display: block;
}

.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
z-index: 500;
top: 7px;
left: -8px !important;
max-width: 570px !important;
max-height: 403px !important;

【问题讨论】：

标签： html css html-table mouseevent mouseover

【解决方案1】：

安提尼奥：

CSS：

.thumbnail-item {
/* delete the line that was here for inheriting the display * / 
height: 10px;
max-width: 5px;
}

HTML：

<tr class="thumbnail-item white">...</tr>
<tr class="thumbnail-item grey">...</tr>

等等等等

您将“缩略图项”css 引用添加到代表数据单元格的<td>tag。您希望“thumbnail-item”css 引用位于整行上，因此它应该位于每个 <tr> 标记上。

【讨论】：

完美运行！可以选择在行中添加吗？
stackoverflow.com/questions/10245279/… --- 我喜欢 David Thomas 的回答 --- 基本上，不，你不能/不应该在声明 <td> 之前使用 <a> 标签。 Jscript 虽然使用 onClick 轻松解决了这个问题。

【解决方案2】：

在您的 Jquery 代码中，使用 td.hover 函数的类并尝试使用以下代码。

$(".thumbnail-item").hover(function() {
   //Write your js code what you have written for hover pdf image
});

如果您也发布您的 jquery 代码，我们会更好地理解。

【讨论】：