Question

我在另一个表的单元格内有一个表。包含表悬停，但我想避免包含ID为“ table_I_don_not_want_to_hover”的表的单元格与其他单元格（td）或每行（tr）一样悬停。我希望它保持其颜色。问题是我无法更改使所有表都悬停的css，并且它位于我无权访问的另一个文件中，因此我需要重写非悬停行为。这是表格：

            <table cellspacing="0" cellpadding="5px">
                            <tbody>

                                <tr><td colspan="100" style="Text-Align:Center;Font-Size:16Px;Font-Weight:Bold">Appeso</td></tr>
                                <tr>
                                    <th nowrap="" class="hc" style="width: 50px">
                                        ........
                                    </th> 
                                    <th nowrap="" class="cl3">row 1</th>
                                    <th nowrap="" class="cl3">row 2</th>
                                    <th nowrap="" class="cl3">row 3</th>
                                    <th nowrap="" class="cl3">row 4</th>
                                    <th nowrap="" class="cl3">row 5</th>

                                </tr>

                            </tbody>
                            <tbody class="class1">

                                    <tr class="">
                                        <td nowrap="" class="cl2" rowspan="8">
                                            <input type="checkbox" value="1111"  name="chk_p">
                                        </td> 

                                        <td nowrap=""  rowspan="8">

                                        <td nowrap="" class="c">row 1</td>
                                        <td nowrap="" class="c ">row 2</td>

                                        <td nowrap="" class="c">row3</td>
                                        <td nowrap="" class="c">row4</td>
                                        <td nowrap="" class="c">row5</td>

                                    <tr id="id" hidden="" style="display: table-row;">
                                        <td class="cl no_hover"></td>
                                        <td colspan="8" class="cl no_hover">
                                            <table id="table_I_don_not_want_to_hover" cellspacing="0" style="border-collapse: collapse; width: 100%%">
                                                <tbody><tr class="no_hover">
                                                    <td class="dc_header_taglia">row</td>
                                                    <td class="dc_header_taglia">row</td>
                                                    <td class="dc_header_taglia">row</td>
                                                    <td class="dc_header_taglia">row</td>
                                                    <td class="dc_header_taglia">row</td>
                                                </tr>
                                                    .............

我尝试过：

.no_hover{
           pointer-events: none;
         }

但是问题是它避免了所有事件，并且我有一个jquery代码，允许该行出现和消失。如果使用该解决方案，它将禁用使它显示/消失的功能。

我尝试过：

            .tr:hover > div {
                opacity: 0.5;
            }
            .tr:hover > div:hover {
              opacity: 1.0;
            }
            .td:hover > div {
                opacity: 0.5;
            }
            .td:hover > div:hover {
              opacity: 1.0;
            }

我对CSS不实用。

Answer 1

您可以在hover属性中使用not()，因为下面我对所有td实现了hover属性，但对具有td类的not_hover却没有实现，这将为您提供帮助。

table,tr,td
{
  border:1px solid black;
}
td:not(.not_hover):hover{
  background-color:yellow;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="not_hover">Hello</td>
      <td>World</td>
    </tr>
     <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
       <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

如何避免只有一个包含要悬停的表的单元格？

1 个答案: