发表新帖
发表新帖

tr:hover not working

后端 未结
关注
13 1654
长发绾君心
长发绾君心 2020-12-08 09:27

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 d

相关标签:
13条回答
  • 野的像风
    2020-12-08 09:52

    You can simply use background CSS property as follows:

    tr:hover{
    background: #F1F1F2;    
}

    Working example

    0 讨论(0)
  • 攒了一身酷
    2020-12-08 09:52

    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 #ffffd;
  padding: 8px;
}

#tblServers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4a536e;
  color: white;
}
    0 讨论(0)
  • 暖寄归人
    2020-12-08 09:53

    try

    .list1 tr:hover td{
    background-color:#fefefe;
}
    0 讨论(0)
  • 无人共我
    2020-12-08 09:55

    Use !important:

    .list1 tr:hover{
    background:#fefefe !important;
}
    0 讨论(0)
  • 星月不相逢
    2020-12-08 10:00

    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');
});
    0 讨论(0)
  • 闹比i
    2020-12-08 10:04

    You need to use <!DOCTYPE html> for :hover to work with anything other than the <a> tag. Try adding that to the top of your HTML.

    0 讨论(0)
 看不清?
提交回复
热议问题