Изменение цвета DIV, который находится за пределами родительского DIV в DIV, который должен вызвать действие

Question

Пожалуйста, проверьте это первым, чтобы понять вопрос: http://jsfiddle.net/830b4rLw/3/

HTML:

<div id="nav"> 
<div id="box1"></div> 
<div id="box2"></div> 
</div> 
<div id="header"></div> 

CSS:

body { 
    background-color: #606; 
} 

#nav { 
    background-color: #f00; 
    height: 50px; 
    width: 100%; 
} 

#header { 
    height: 300px; 
    width: 100%; 
    background-color: #00f; 
} 

#box1 { 
    height: 30px; 
    width: 20px; 
    float: left; 
    background-color: #0f0; 
} 

#box2 { 
    height: 30px; 
    width: 50px; 
    background-color: #000; 
    float: left; 
    margin-left: 5px; 
} 

@keyframes a { 
    0%{} 
    100% {background-color: #fff;} 
    } 

#box1:hover + #box2{ 
     animation: a 2s; 
     animation-fill-mode: forwards; 
} 

На связанном jsfiddle, когда вы наводите флажок1 (зеленая коробка), box2 меняет свой цвет.

Теперь, что я хочу сделать;

Сценарий первого сценария: когда вы наведете поле1, я хочу изменить цвет фона #header (синяя коробка).

Второй регистр secenario, я хочу изменить цвет фона (который на данный момент пурпурный), когда вы наведите # box1.

Так что я прошу здесь, я хочу либо изменить цвет фона div, который не находится рядом с другим, и не имеет одного и того же родителя. И во втором случае, я хочу навести div (то есть внутри другого div), чтобы изменить цвет фона элемента.

Пожалуйста, прочтите: Я не хочу использовать javascript!

Спасибо всем за ответы, любую дополнительную информацию и советы по этому разделу очень приветствуются!

Answer 1

Чтобы ответить на мой собственный вопрос, вот решение:

Вы можете использовать технику меток ввода.

HTML коды:

этикетки

тип входного = «радио» или тип ввода = «флажок»

Это решение также делает его OnClick вместо висения, так что вам не нужно использовать JavaScript onclick функция, ее двойной решатель проблемы.

http://jsfiddle.net/69m1mmmk/1/

так этикетки, вещь кликаем и изменить, чтобы выглядеть так, как мы хотим в нав:

<div id="nav"> 
<label class="color-box" id="color-box1" for="color-box-input1"></label> 
<label class="color-box" id="color-box2" for="color-box-input2"></label> 
</div> 

однако радио-кнопки скрыты, и они находятся в одной и той же родительской DIV как фон div. (прочитайте комментарий @CBroe на вопрос, чтобы узнать больше о фоном div) или просто проверьте код скрипта JS, чтобы понять, что я имею в виду. Итак, когда вы нажимаете на ярлык, вы запускаете переключатели, расположенные на другой стороне сайта, и анимация будет работать нормально!

#color-box-input2:checked ~ #choose-color-bg { 
animation: color2 2s; 
animation-fill-mode: forwards; 
}