css3纯粹：如何将一个元素悬停在外面？

Question

div.test:hover #sendBtn{ 
    color:red; 
} 

能正常工作是sendBtn是里面的div.test元素

但如何实现这一目标（纯CSS），当它是外面？ 例如：

<button id="sendBtn">hello</button> 
<div class='test'>div here</div> 

Answer 1

没有为在CSS前一个元素没有选择，但你可以改变元素的顺序和使用adjacent sibling selector：

HTML

<div class='test'>div here</div> 
<button id="sendBtn">hello</button> 

CSS

div.test:hover + #sendBtn { 
    color:red; 
} 

fiddle