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

Posted 2023-03-06

【中文标题】如何避免只有一个包含要悬停的表格的单元格？

【英文标题】：How can I avoid only one cell that contains a table to hover?

【发布时间】：2020-03-14 15:09:55

【问题描述】：

我在另一个表格的单元格内有一个表格。包含表悬停，但我想避免包含 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 不实用。

【问题讨论】：

回答你的问题，这个案例简单使用not()

“包含表悬停”是什么意思？

【参考方案1】：

您可以在悬停属性中使用not()，如下所示，我对所有td 实施悬停属性，但不是对具有not_hover 类的td 实施悬停属性，这将对您有所帮助。

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>

【讨论】：

我认为您错过了原始消息的这一部分：“我无法更改使所有表格悬停的 css，并且它位于另一个我无权访问的文件中”

那么你可以添加css而不是更改css