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


Tags: html,css,table,mouseevent,mouseover

Problem :

i'm working on a website and i've to create a table with a mouse over effect. As you can see here http://salmenpark-test.nowcommu.myhostpoint.ch/laden-mieten-en 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 mause on the single table rows. How can i do it?

Table: 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;

Thanks in advice



Solution :

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.


    CSS Howto..

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    How to make a fully responsive web page [closed]

    How to add a sliding div to these CSS Message Bubbles?

    Showing HTML page with CSS attached in a WebView

    How to position text in a navigation “div.”

    How to grows up a div height with a table that has your rows added dynamically?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    In Firebug, how to tell what is overriding a style?

    how to use text-indent only with element not ont it's :before Selector?

    How to stretch container div from header to footer with html/css?

    How to vertically center multiline text with an image on its left?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How to run PHP through Adobe Muse generated CSS

    How to reset margin-bottom to its default value

    How to implement single-line ellipsis with CSS

    How to apply CSS to table cell depending on conditions

    How to centre a div vertically and horizontallly?

    How to make “button-like appearance” with CSS

    How do I add HTML files to a GitHub repo?

    How to remove underline in css for anchors pseudo element in IE

    How to set a width of the background (HTML and CSS)

    How to autoprefix css files generated by less, in Webstorm?

    How to make round circle links responsive in css?

    How to keep transparent radial background smooth in browsers other than Chrome?

    Flexbox used for equal height, however it is ignoring column width in grid system

    How to make this working Java-script more efficient

    How to center hgroup in css

    How to center the center circle?

    css menu active sub links to show on parent link

    How to target this HTML in CSS?