Задание Шаги из Практикума

[rpmcmerphy]

http://cssdeck.com/labs/l4ciwczf

 

Вот такой вопрос при псевдоклассе hover перекрашивается в зеленый уголок и перекрашивает родительский div , почему при наведении курсора на родительский div не перекрашиваетя уголок он же дочерний.

[Catherine]

Потому что свойство background не наследуется http://htmlbook.ru/css/background

Фон дочерних элементов при наведении на родителя можно изменить так: http://cssdeck.com/labs/ej26snr6

[rpmcmerphy]

Потому что свойство background не наследуется http://htmlbook.ru/css/background

Фон дочерних элементов при наведении на родителя можно изменить так: http://cssdeck.com/labs/ej26snr6

Спасибо. Вы дописали

 

"div:hover, div:hover .ang {

background:green;

}"

 

Скажите что значит эта запись ? Для элементов div и элементов div класса ang при наведении закрасить оба ?

[Catherine]

Эта запись означает буквально следующее:

div:hover {background:green;} - при наведении на div применить к нему зеленый фон, 

div:hover .ang {background:green;} - при наведении на div применить зеленый фон к вложенному в него .ang.

 

запятая группирует стили для нескольких селекторов http://htmlbook.ru/samcss/gruppirovanie.

Подробнее про hover: http://htmlbook.ru/css/hover

[rpmcmerphy]

Эта запись означает буквально следующее:

div:hover {background:green;} - при наведении на div применить к нему зеленый фон, 

div:hover .ang {background:green;} - при наведении на div применить зеленый фон к вложенному в него .ang.

 

запятая группирует стили для нескольких селекторов http://htmlbook.ru/samcss/gruppirovanie.

Подробнее про hover: http://htmlbook.ru/css/hover

 

то есть можно написать и так : "div:hover, div:hover > .ang {

background:green;

}"

 

Спасибо прояснилось в голове.

Дальше делаю и получается :

 

http://cssdeck.com/labs/l4ciwczf

 

Вертикальные пробелы между блоками, что это ? Через margin:0px; не убираются....

Edited November 4, 2013 by rpmcmerphy

[Catherine]

Всё верно, но нужно помнить, что div:hover > .ang сработает, только если div является непосредственным родителем .ang. http://htmlbook.ru/samcss/dochernie-selektory

Вертикальные пробелы между блоками, что это ? Через margin:0px; не убираются....

Грубо говоря, это так называемый "межбуквенный интервал", который возникает между inline элементами. Подробнее про решение проблемы и ее описание можно почитать тут и тут.

[rpmcmerphy]

http://cssdeck.com/labs/l4ciwczf Убрал  "межбуквенный интервал", но по моему мое решение не очень, так как у уголка видно тонкую линию на фоне родительского дива, я же убрал рамку но все равно не получается как бы склеить элементы, смотриться некрасиво, да еще большие блоки наезжают на малые при наведении коверкая картину.

[rpmcmerphy]

http://htmlbook.ru/blog/treugolniki-cherez-css

 

Как я понимаю на эти треугольники не действует градиент ?

[Vlad]

Нет, не действует градиент.

[rpmcmerphy]

Нет, не действует градиент.

Как сделать с градиентом, надо квадрат поварачивать ?