Table: 如何在鼠标悬停在单行时更改图片？

Question

我正在一个网站上工作，我必须创建一个 table 鼠标悬停效果，只有当您将鼠标放在图片上并且只放在 PDF 图标上时才会出现这种效果。

我现在需要的是当您将鼠标移动到单个 table 行时应用此效果。我该怎么做？

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;

Answer 1

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

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

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

Answer 2

安提奥：

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>

等等等等

您添加了 "thumbnail-item" css 对代表数据单元格的 <td> 标签的引用。您希望 "thumbnail-item" css 引用在整行中，因此它应该在每个 <tr> 标记中。

Table: 如何在鼠标悬停在单行时更改图片？

Table: how to change pictures on mouseover on single rows?

html

css

html-table

mouseevent

mouseover