Changing background colour of tr element on mouseover

Question

I want to have my table rows highlighted on mouse over  but I have yet to find a way to do it that isn t using Javascript  Is this not possible in CSS   I ve tried this   tr hover       background   000      But that doesn t work  Using td hover works  but I want to change the background colour of the whole table row   Is there a pure CSS HTML way to do it  or am I going to have to resort to Javascript

User · Answer

its easy   Just add  important at the end of your css line    tr hover      background   000  important

User · Answer

You could try   tr hover       background-color   000     tr hover td       background-color  transparent     or  000        JS Fiddle demo

User · Answer

Try it   lt  - HTML -- gt   lt tr onmouseover  mOvr this   ffa     onmouseout  mOut this   FFF     gt    lt script gt  function mOvr src clrOver       if   src contains event fromElement        src bgColor   clrOver           function mOut src clrIn       if   src contains event toElement        src bgColor   clrIn            lt  script gt

User · Answer

This will work     tr hover       background   000  important      If you want to only apply bg-color on TD then   tr hover td       background   c7d4dd  important      It will even overwrite your given color and apply this forcefully

User · Answer

tr hover td  background-color  000

User · Answer

lt tr gt s themselves are very hard to access with CSS  try tr hover td  background  000

User · Answer

I had the same problem   tr hover   background   000  important      allone did not work  but adding  tr hover td   background  transparent      to the next line of my css did the job for me    My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr hover work    Actually  I used it with a classnames    trclass hover   background   000  important     trclass hover td   background  transparent      Thanks for these answers  they made my day

User · Answer

You can give the tr an id and do it   tr element      background-color  green      cursor  pointer      height  30px      tr element hover      background-color  blue      cursor  pointer       lt table width  400px  gt   lt tr id  element  gt   lt td gt  lt  td gt   lt  tr gt   lt  table gt

User · Answer

tr hover td someclass      background   EDB01C     color  FFF      only someclass cell highlight

[html] Changing background colour of tr element on mouseover

Examples related to html

Examples related to css