具有范围

Question

请参阅https://jsfiddle.net/gmczjrmp/1/以便于理解。

在第一张表中，一切正常。事实上，这也是我在第二个表中所需要的，这是一个嵌套表。

当盘旋时，只有一行应突出显示，如第一张表

我尝试过更改

tr:hover span.hover2show

到

tr:hover > span.hover2show 

但没有运气。

任何帮助都将不胜感激。

Answer 1

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

＆＃13;

＆＃13;

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

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

span {
  visibility: hidden;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该尝试提供个别课程。请查看代码窗格alos

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

Codpen链接

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