2014-11-18 2 views
4

Я занимаюсь своим css, используя зависание, когда вижу эту проблему, когда я навешиваю сверху цвет, изменится на синий, а середина изменится на красный, но когда я навешиваю на середину середины, цвет до красного, но верхняя часть остается.Наведите элемент на другой элемент

Я попытался добавить важный элемент: посредине, но это не сработало. Я также удаляю знак +, но я думаю, что это не сработает, так как он должен быть в одном div для этого.

Почему наведение не работает на верхний div, когда средний div завис?

HTML

<div class="top"> 
    <p> HELLO WORLD </p> 
</div> 

<div class="middle"> 
    <p> HELLO PEOPLE </p> 
</div> 

CSS

.top:hover + .middle { 
    color:red; 
} 

.top:hover { 
    color:blue; 
} 

.middle:hover { 
    color:red; 
} 

.middle:hover + .top { 
    color: blue; 
} 

FIDDLE HERE

+0

К сожалению, вы не можете сделать это в CSS. Вам понадобится javascript. – dfsq

+1

любая идея о '+' операторе в CSS ?? –

+0

+ не работает. вы должны использовать javascript 4, который. – brandelizer

ответ

0

Вы не можете выбрать родительский элемент в CSS, к сожалению. Но JavaScript может быть использован для решения этой проблемы.

Проверить это для получения дополнительной информации о селекторов ... http://www.w3.org/TR/CSS21/selector.html

0

CSS-+ селектор на следующий селектор родственный. Это не работает на предыдущих братьев и сестер, подобно тому, как вы не можете нацеливать родителя на ребенка. Это связано с тем, что CSS работает сверху-снизу (т.е. родительский> дочерний, следующий брат и т. Д.), А не наоборот.

Этот article объясняет, почему CSS не имеет родительского селектора, но та же логика применяется для отсутствия предыдущих селекторов.

tldr: Селекторы CSS снизу вверх невозможны из-за их последствий для производительности в браузерах.

Смежные вопросы