tr hover not working

Question

I m trying to highlight  change background color  of the entire row when the mouse is hovering on a table row  I searched through the Net and it should be working  but it doesn t  I m displaying it on Chrome    lt table class  list1  gt   lt tr gt      lt td gt 1 lt  td gt  lt td gt a lt  td gt   lt  tr gt   lt tr gt      lt td gt 2 lt  td gt  lt td gt b lt  td gt   lt  tr gt   lt tr gt      lt td gt 3 lt  td gt  lt td gt c lt  td gt   lt  tr gt   lt  table gt    my css    list1 tr hover  background-color  fefefe      The correct css should be    list1 tr hover td  background-color  fefefe       --this css for the td keeps overriding the one i showed earlier  list1 td  background-color  ccc000      Thanks for the feedback guys

User · Answer

You need to use  lt  DOCTYPE html gt  for  hover to work with anything other than the  lt a gt  tag  Try adding that to the top of your HTML

User · Answer

Your best bet is to use  table YourClass tr hover td   background-color   FEFEFE      Rows aren t fully support for background color but cells are  using the combination of  hover and the child element will yield the results you need

User · Answer

try   list1 tr hover td      background-color  fefefe

User · Answer

Recently I had a similar problem  the problem was I was using background-color  use background   anyColor   example   tr  hover td  background  red     This works like charm

User · Answer

I had the same problem  I found that if I use a DOCTYPE like    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt    it didn t work  But if I use    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN  gt    it did work

User · Answer

Also try thistr hover td  color  aqua

User · Answer

tr hover doesn t work in old browsers   You can use jQuery for this    tr-hover       background-color  fefefe          list1 tr   hover function           this  addClass  tr-hover      function           this  removeClass  tr-hover

User · Answer

Like  wesley says  you have not closed your first  lt td gt   You opened it two times    lt table class  list1  gt   lt tr gt      lt td gt 1 lt  td gt  lt td gt a lt  td gt   lt  tr gt   lt tr gt      lt td gt 2 lt  td gt  lt td gt b lt  td gt   lt  tr gt   lt tr gt      lt td gt 3 lt  td gt  lt td gt c lt  td gt   lt  tr gt   lt  table gt    CSS    list1 tr hover      background-color  fefefe      There is no JavaScript needed  just complete your HTML code

User · Answer

Use  important    list1 tr hover      background  fefefe  important

User · Answer

Also  it matters in which order the tags in your CSS file are styled  Make sure that your tr nth-child and tr hover td are described before table s td and th  Like so    tblServers     font-family   Trebuchet MS   Arial  Helvetica  sans-serif    border-collapse  collapse    width  100       tblServers tr nth-child even  background-color   f2f2f2     tblServers tr hover td background-color   c1c4c8     tblServers td   tblServers th     border  1px solid  ddd    padding  8px      tblServers th     padding-top  12px    padding-bottom  12px    text-align  left    background-color   4a536e    color  white

User · Answer

Try it   css code    list1 tr hover td       background-color  fefefe

User · Answer

You can simply use background CSS property as follows   tr hover      background   F1F1F2          Working example

User · Answer

Works fine for me    The tr hover should work  Probably it won t work because    The background color you have set is very light  You don t happen to use this on a white background  do you  Your  lt td gt  tags are not closed properly    Please note that hovering a  lt tr gt  will not work in older browsers

[css] tr:hover not working

Examples related to css