Question

我在网站上工作，而且我创建了一个鼠标悬停效果的桌子。正如您在此处看到的http://salmenpark-test.nowcommu.myhostpoint.ch/laden-mieten-en，只有当您在图片上使用鼠标并且仅在PDF图标上使用效果时。

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

表：http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/table_en/table_ipad_portrait/index.html

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

Antionio：

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>

等等。

您正在添加＆＃34;缩略图项＆＃34; css引用<td>标记，表示数据的单元格。你想要＆＃34;缩略图项＆＃34; css引用在整行上，因此它应该在每个<tr>标记上。

Answer 2

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

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

如果你发布你的jquery代码，我们最好还是明白。

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

2 个答案: