嵌套懸停CSS的範圍

-1

請參閱https://jsfiddle.net/gmczjrmp/1/以便於理解。嵌套懸停CSS的範圍

在第一張表一切工作正常。事實上，這是我需要的第二張表，這是一個嵌套表。

在上空盤旋，只有一行應突出，如第一個表

我試圖改變

tr:hover span.hover2show

到

tr:hover > span.hover2show

，但沒有運氣。

任何幫助，將不勝感激。

來源

2016-09-16 pratik mankar

跨度是不是TR的直接孩子有一個TD在之間嘗試：'tr：hover> td> span.hover2show' –

'tr：hover> span.hover2show'永遠不會工作。 ''''表示'span'是'tr'的直接子元素，但不是因爲'span'和'tr'之間有'td'。即使你使用格式不正確的HTML而沒有'td's，瀏覽器可能會自動插入'td's。 –

請在問題中添加代碼 - jsfiddle的鏈接必須附帶問題本身的代碼 – Pete

讓事情變得更簡單，讓你的表是有這個功能的類，這樣你可以更容易區分它們在你的代碼，並在你的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>

來源

2016-09-16 10:55:53

你應該嘗試給個人課。請在代碼窗格看看阿洛斯

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

來源

2016-09-16 11:03:23

嵌套懸停CSS的範圍

回答

相關問題