スパン付きネスト型ホバーcss

Question

理解を容易にするためhttps://jsfiddle.net/gmczjrmp/1/を参照してください。

最初のテーブルすべて正常です。実際、これは私が必要とするものです2番目のテーブルも同様にネストしたテーブルです。

ホバーするとき、単一の行は、最初の表のように

を強調すべきであるが、私は

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

ます個々のクラスを与えてみるべきです。 TDがある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