Помогите решить задачу с :hover

[Akkord87]

В общем идея такая:

- создал три квадрата и один список, который находится под квадратами. Данные элементы находятся в одном блоке. В каждом из квадратов находится по одному блочному элементу <p> разного цвета, у которых стоит display: none. При наведении курсора мыши на один из пунктов списка под соответствующим квадратом с использованием  :hover, ожидал увидеть чудесное появление блочного элемента <p> в квадрате соответствующего цвета.... Но как то появляться он не хочет... Кто может объяснить эту проблему и возможно ли осуществить такую задумку?

 

Вот мое творение:

http://jsbin.com/fojuz/1/edit

[Aleksandr.L]

HTML надо изменять, .main li:hover p { display: block; } — селектор потомка. Тег <p> не потомок тега <li>.

[advokatua]

Сам тоже сижу туплю после тренировки. Как же можно было не вставить блок после списка? )

В смысле потомком.

Edited February 14, 2014 by advokatua

[Akkord87]

А не могли бы данный пример реализовать? Чтобы наглядно посмотреть...

[Akkord87]

HTML надо изменять, .main li:hover p { display: block; } — селектор потомка. Тег <p> не потомок тега <li>.

А вы не могли бы на примере показать?)

[Aleksandr.L]

 

HTML надо изменять, .main li:hover p { display: block; } — селектор потомка. Тег <p> не потомок тега <li>.

А вы не могли бы на примере показать?)

 

 

Да проще JavaScript использовать. Как-то так: http://jsbin.com/fojuz/14/edit?html,css,js,output

[Akkord87]

 

 

HTML надо изменять, .main li:hover p { display: block; } — селектор потомка. Тег <p> не потомок тега <li>.

А вы не могли бы на примере показать?)

 

 

Да проще JavaScript использовать. Как-то так: http://jsbin.com/fojuz/14/edit?html,css,js,output

 

Хотелось бы на чистом CSS. Это ведь можно осуществить?) Просто я немного не понимаю как правильно использовать ховер, чтобы он работал.

[Aleksandr.L]

Хотелось бы на чистом CSS. Это ведь можно осуществить?) Просто я немного не понимаю как правильно использовать ховер, чтобы он работал.

 

http://jsbin.com/fojuz/17/edit?html,css,output

 

Edited February 15, 2014 by Aleksandr.L

[Akkord87]

 

Хотелось бы на чистом CSS. Это ведь можно осуществить?) Просто я немного не понимаю как правильно использовать ховер, чтобы он работал.

 

http://jsbin.com/fojuz/17/edit?html,css,output

 

 

Спасибо, очень помог))) 

 

А почему перестает ховер работать, если убрать "+" ??? ведь тег <p> один в документе. То есть, мы говорим, что при наведении на класс .outer применяется какой то там эффект к тегу <p>.

 

:hover + .inner p {

  display: block;

}

[Aleksandr.L]

А почему перестает ховер работать, если убрать "+" ??? ведь тег

один в документе. То есть, мы говорим, что при наведении на класс .outer применяется какой то там эффект к тегу

.

 

http://www.xiper.net/learn/css/selectors/sibling-combinator.html

[Akkord87]

 

А почему перестает ховер работать, если убрать "+" ??? ведь тег

один в документе. То есть, мы говорим, что при наведении на класс .outer применяется какой то там эффект к тегу

.

 

http://www.xiper.net/learn/css/selectors/sibling-combinator.html

 

СПС разобрался))))