2015-06-28 182 views
1

其他元素的孩子的風格,我可以做到這一點的JavaScript,但我怎麼會去只用CSS實現這一點:影響懸停

<table> 
    <tr> 
     <td> 
      Hover <a href="#info">me</a> 
     </td> 
    </tr> 

    <tr> 
     <th id="info"> 
      Info 
     </th> 
    </tr> 
</table> 

當錨鏈接被徘徊在所有我想要的是,該表標題「信息」受到影響。這些都是我試圖無效的:

a:hover #info 
{ 
    text-decoration: underline; 
} 

a:hover table tr > th#info 
{ 
    text-decoration: underline; 
} 

我錯過了什麼?

回答

3

你不能選擇的鏈接做到這一點,但你可以針對父tr

這是因爲no parent selectorprevious sibling selector

tr:hover + tr th#info { 
 
    text-decoration: underline; 
 
    background: red; 
 
} 
 
a { 
 
    display: inline-block 
 
}
<table> 
 
    <tr> 
 
    <td> 
 
     Hover <a href="#info">me</a> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <th id="info"> 
 
     Info 
 
    </th> 
 
    </tr> 
 
</table>

+0

爲什麼它的任何解釋不會爲TR的孩子工作?因爲我可能想在TD內部添加更多的元素/錨點,針對這個#info,但如果這是不可能的,那麼太糟糕了... – jom

+0

我建議你檢查我提供的鏈接...基本上你不能選擇向上DOM或其​​他父母的孩子。 –

+0

行,Javascript去吧。這真的太糟糕了,但是謝謝! – jom