tr:hover not working_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-06 10:24 出处：网络

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

相关专题：css

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.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

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 开发者_如何学JAVAtd{
background-color:#ccc000;
}

Thanks for the feedback guys!

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.

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.

try

.list1 tr:hover td{
    background-color:#fefefe;
}

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');
});

You can simply use background CSS property as follows:

tr:hover{
    background: #F1F1F2;    
}

Working example

Try it:

css code:

.list1 tr:hover td {
    background-color:#fefefe;
}

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!

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 <td> tags are not closed properly.

Please note that hovering a <tr> will not work in older browsers.

Use !important:

.list1 tr:hover{
    background:#fefefe !important;
}

Like @wesley says, you have not closed your first <td>. You opened it two times.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

CSS:

.list1 tr:hover{
    background-color:#fefefe;
}

There is no JavaScript needed, just complete your HTML code

I had the same problem. I found that if I use a DOCTYPE like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

it didn't work. But if I use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

it did work.

Also try thistr:hover td {color: aqua;} `

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;
}

tr:hover not working

精彩评论

关注公众号

热门标签

图文推荐

tr:hover not working

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：