2015-06-28 530 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