Наведите указатель на конкретный 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