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

Question

I'm working on a website and I've to create a table with a mouse over effect the effect is only when you go with the mouse on the picture and only on the PDF icon.
What I need now is to apply this effect when you go with the mouse on the single table rows. How can I do it?
HTML:
<td class="thumbnail-item" data-th="PDF"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24">
<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>
etc, etc.
You were adding the "thumbnail-item" css reference to the <td>tag which represents a cell of data. You want the "thumbnail-item" css reference to be on the entire row, so it should be on each <tr> tag instead.

Answer 2

In your Jquery code, use the class of your td.hover function and try with the below code.
$(".thumbnail-item").hover(function() {
//Write your js code what you have written for hover pdf image
});
It would be better for us to understand if you post your jquery code as well.