css3 pure：如何将元素悬停在外面？

Question

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

这个工作正常，sendBtn是INSIDE的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