具有跨度的嵌套悬停 css

Question

请参考https://jsfiddle.net/gmczjrmp/1/更容易理解。

在第一个表中一切正常。 事实上，这也是我在Second table 中需要的，它是一个嵌套表。

将鼠标悬停在上方时，只有一行应突出显示，如第一个表中所示

我试着改变

tr:hover span.hover2show

到

tr:hover > span.hover2show 

但没有运气。

任何帮助，将不胜感激。

Answer 1

让事情变得更简单，并为具有此功能的表提供一个类，这样您就可以更轻松地在代码中区分它们并在 css 中选择它们：

 td { border: 1px solid; padding: 4px; } table.hoverable tr:hover span.hover2show { visibility: visible; color:red; } span { visibility: hidden; }

 First Table <table class='hoverable'> <tr> <td> r1c1 </td> <td> r1c2 </td> <td> <span class="hover2show"> r1c3 </span> </td> <td> <span class="hover2show"> r1c4 </span> </td> </tr> <tr> <td> r2c1 </td> <td> r2c2 </td> <td> <span class="hover2show"> r2c3 </span> </td> <td> <span class="hover2show"> r2c4 </span> </td> </tr> <tr> <td> r3c1 </td> <td> r3c2 </td> <td> <span class="hover2show"> r3c3 </span> </td> <td> <span class="hover2show"> r3c4 </span> </td> </tr> </table> <br> Second Table <table> <tr> <td> Outer table </td> <td> <table class='hoverable'> <tr> <td> r1c1 </td> <td> r1c2 </td> <td> <span class="hover2show"> r1c3 </span> </td> <td> <span class="hover2show"> r1c4 </span> </td> </tr> <tr> <td> r2c1 </td> <td> r2c2 </td> <td> <span class="hover2show"> r2c3 </span> </td> <td> <span class="hover2show"> r2c4 </span> </td> </tr> <tr> <td> r3c1 </td> <td> r3c2 </td> <td> <span class="hover2show"> r3c3 </span> </td> <td> <span class="hover2show"> r3c4 </span> </td> </tr> </table> </td> <td> Outer table </td> </tr> </table>

Answer 2

你应该尝试单独上课。 请在代码窗格中查看

HTML

First Table
<table class="first-table">
  <tr>
    <td> r1c1 </td>
    <td> r1c2 </td>
    <td> <span class="hover2show">    r1c3  </span> </td>
    <td> <span class="hover2show">    r1c4  </span> </td>
  </tr>
  <tr>
    <td> r2c1 </td>
    <td> r2c2 </td>
    <td> <span class="hover2show">    r2c3  </span> </td>
    <td> <span class="hover2show">    r2c4  </span> </td>
  </tr>
  <tr>
    <td> r3c1 </td>
    <td> r3c2 </td>
    <td> <span class="hover2show">    r3c3  </span> </td>
    <td> <span class="hover2show">    r3c4  </span> </td>
  </tr>
</table>
<br>
Second Table
<table>
  <tr>
    <td>
      Outer table
    </td>
    <td>
      <table class="second-table">
        <tr>
          <td> r1c1 </td>
          <td> r1c2 </td>
          <td> <span class="hover2show">    r1c3  </span> </td>
          <td> <span class="hover2show">    r1c4  </span> </td>
        </tr>
        <tr>
          <td> r2c1 </td>
          <td> r2c2 </td>
          <td> <span class="hover2show">    r2c3  </span> </td>
          <td> <span class="hover2show">    r2c4  </span> </td>
        </tr>
        <tr>
          <td> r3c1 </td>
          <td> r3c2 </td>
          <td> <span class="hover2show">    r3c3  </span> </td>
          <td> <span class="hover2show">    r3c4  </span> </td>
        </tr>
      </table>
    </td>
    <td>
      Outer table
    </td>
  </tr>
</table>

CSS

td {
  border: 1px solid;
  padding: 4px;
}

.first-table tr:hover span.hover2show {
  visibility: visible;
  color:red;
}


 table .second-table tr:hover span.hover2show {
  visibility: visible;
  color:green;
}

科普链接

http://codepen.io/santoshkhalse/pen/NRAApg