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