javascript - Change table row color on hover (jQuery or CSS) -



javascript - Change table row color on hover (jQuery or CSS) -

my problems got 'highlighted' (meaning they've got own background color highlight them) cells in table won't alter background color when utilize code alter color of entire row when mouse hoovering on them.

hoovering on row changes background color of cells aren't highlighted.

how prepare entire row changes background color?

i've got html table:

class="snippet-code-js lang-js prettyprint-override">$(window).load(function() { $('#infotable tr').hover(function() { $(this).addclass('hover'); }, function() { $(this).removeclass('hover'); }); }); class="snippet-code-css lang-css prettyprint-override">#infotable td { padding:0.7em; border:#969696 1px solid; } .highlight { background:#daffd6; } .hover { background:yellow; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <thead> <tr> <th></th> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> </thead> <tbody id="infotable"> <tr> <td>row #1</td> <td>889 kg</td> <td class="highlight">151 kg</td> <td>192 kg</td> </tr> <tr> <td>row #2</td> <td>784 kg</td> <td>15 kg</td> <td class="highlight">64 kg</td> </tr> </tbody> </table>

you can accomplish in css alone. need create :hover rule more specific td.highlight. seek this:

#infotable tr:hover td, #infotable tr:hover td.highlight { background:yellow; }

example fiddle

javascript jquery html css

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -