表格样式 - td:hover 规则是否可以覆盖 tr:hover？

Question

I was wondering if it's possible to have a table styled with :hover background rules for both a tr and a td with certain class so that when the particular td is hovered on, only that element gets the background applied and not the tr it's within.

So for example:

 tr:hover { background: blue; } td.something:hover { background: yellow; }

 <table> <tr> <td></td> <td></td> <td class="something"></td> </tr> <table>

Here I'd like the table to highlight the row if the first two td elements are hovered, but not on the third td with the something css class.

I was wondering if the :not selector could help somehow, but I haven't come up with a way yet. Is this possible?

Thanks

Answer 1

I think this is what you want:

 tr:hover { background: blue; } tr:hover td.something { background: #FFF; } tr:hover td.something:hover { background: yellow; }

 <table> <tr> <td>aaa</td> <td>aaa</td> <td class="something">dddd</td> </tr> <table>

Answer 2

Sure it possible. Here's the fiddle

HTML

<table>
  <tr>
    <td>
      first td
    </td>
    <td>
      second td
    </td>
    <td>
      third td
    </td>
  </tr>
</table>

CSS:

   td:hover{
      background-color:red;
    }
    tr:hover{
      background-color:yellow;
    }
    td{
      border:1px solid black;
      padding: 5px;
    }

Answer 3

You can except tags with your css class as following

 table { border: 1px solid blue; } tr:hover td:not(.something) { background: blue; }

 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td class="something">Cell 3</td> </tr> <table>

Or if you want to some cells with bg yellow and some with blue same time:

 tr:hover td:not(.something) { background: blue; } tr:hover td:not(.anotherthing) { background: yellow; }

 <table> <tr> <td class="anotherthing">Cell 1</td> <td class="anotherthing">Cell 2</td> <td class="something">Cell 3</td> </tr> <table>