html - 悬停特定的 div - 更改另一个 div

Question

我想在悬停在另一个 div 上时更改它的背景颜色。第一个 div 将变为黑色，但悬停时不会改变。当悬停在第二个 div 上时，其背景将变为黑色，而第一个 div 将变为白色。我以前做过这个，但它似乎不再起作用了。

CSS

.svart {
    background-color: black;
}

.hvit {
    background-color: white;
}

.hvit:hover {
    background-color: black;
}

HTML

 <div id="bestill_forside" class="svart">
    One
    </div>

    <div id="lear_forside" class="hvit">
    Two
</div>

我尝试了以下方法:

.hvit:hover .svart {
        background-color: white;
}

.hvit:hover + .svart {
        background-color: white;
}

.hvit:hover > .svart {
        background-color: white;
}

Answer 1

.svart 必须在文档中的.hvit 下方，CSS 中不能选择前面的元素:

    <div id="lear_forside" class="hvit">
    Two
    </div>
    <div id="bestill_forside" class="svart">
    One
    </div>

您的 CSS 选择器所做的是:

.hvit:hover .svart {
        background-color: white; */This Selected .svart inside of .hvit*/
}

.hvit:hover + .svart {
        background-color: white; */This Selected .svart that was a immediate sibling of .hvit*/
}

.hvit:hover > .svart {
        background-color: white; */This Selected .svart that was a direct child of .hvit*/
}

阅读更多关于 CSS 选择器的内容:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors