Применить стиль css к элементу, когда его контейнер / родительский элемент зависает Angular

Когда я наводил курсор на контейнер элемента, я хочу, чтобы элемент получил визуальное изменение с помощью css / scss.

требования: - Должен происходить из дочернего компонента или файла sass. не может знать об отношениях между родителями и детьми. - sass css или в угловом компоненте

Я пробовал декоратор прослушивателя хоста в angular, но это просто элемент хоста, а не его родительский элемент.

Я пробовал селекторы: host и: host-context, но имел аналогичный опыт работы с хост-слушателем.

Любые предложения будут ценны.

Обновлено: Чтобы визуализировать это, я мог бы иметь небольшой квадратный элемент внутри большого квадратного элемента, тогда, когда пространство, где маленький квадратный элемент не перекрывает площадь большого квадратного элемента, зависает, маленький квадрат получает стиль.

РАЗЪЯСНЕНИЕ:

Применить стиль css к элементу, когда его контейнер / родительский элемент зависает Angular

Дочерний элемент (маленький квадрат в вашем примере) - это компонент Angular или просто элемент HTML?

ConnorsFan 08.08.2018 23:39

@ConnorsFan дочерний элемент является угловым компонентом.

rjustin 08.08.2018 23:41

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

Ason 08.08.2018 23:42

@ConnorsFan Цель состоит в том, чтобы сделать это изнутри дочернего элемента, ничего не зная о контейнере / родителе.

rjustin 08.08.2018 23:43

Итак, чтобы прояснить, что я имел в виду, для решения, использующего только CSS, оно должно быть таким: jsfiddle.net/6egc7f21

Ason 08.08.2018 23:52

@LGSon Я вижу, к чему вы клоните, и результат, по сути, тот же. Ключевым моментом, который я ищу, является то, что все это реализовано в дочернем элементе без какого-либо ведома родителя. Я не хотел путать отношения. Это будет родительский ребенок, и родительский элемент (даже поверх дочернего) в порядке.

rjustin 08.08.2018 23:58

@rjustin Но это именно то, что делает моя рабочий пример

Ason 08.08.2018 23:59

Значит, стиль должен задаваться даже при наведении указателя мыши на ребенка?

ConnorsFan 08.08.2018 23:59

@ConnorsFan: Да, но меня это не волнует. Просто, когда родительский элемент зависает где-нибудь (наиболее важно те части, где дочерний элемент не перекрывается), тогда дочерний элемент получает стиль.

rjustin 09.08.2018 00:01

Вот модифицированная версия, которая может лучше показать, что я имею в виду: jsfiddle.net/6egc7f21/1 ... и, как вы можете видеть, ни одно из зависаний не связано с контейнером

Ason 09.08.2018 00:02

Может быть, один из этих двух стеков будет делать то, что вы хотите: stackblitz1, stackblitz2. Я сделал это с прослушивателями событий, потому что вы хотите контролировать все, начиная с дочернего элемента, а в CSS нет «родительского» селектора.

ConnorsFan 09.08.2018 00:03

Другой вариант: если ваш меньший квадрат является дочерним по отношению к контейнеру, использовать это правило CSS: *:hover .smaller_square { background: red; }

Ason 09.08.2018 00:05

@LGSon Хорошо, я понимаю, к чему вы клоните, имея два элемента, один из которых покрывает весь родительский элемент только для прослушивания при наведении курсора. Это умно, но это будет конфликтовать с другими детьми, которые присутствуют, но не в стороне от этого процесса. См. Изображение в сообщении (Золотая звезда будет затронута, хотя она не используется для этого наведения).

rjustin 09.08.2018 00:05

Нет, не будет, так как при наведении звезды ничего не произойдет с маленький квадрат. Сложите все вместе, и вы увидите ... и вот обновление моей скрипки: jsfiddle.net/6egc7f21/2

Ason 09.08.2018 00:07

И еще один образец: jsfiddle.net/6egc7f21/3

Ason 09.08.2018 00:12

@LGSon Хорошо, да, это правильно, хотя я использую макет Flexbox (который не упоминался в сообщении), вызывает ли это проблема с макетом?

rjustin 09.08.2018 00:13

Нет, не понимаю, как это что-то изменит. При использовании абсолютного позиционирования на гибком элементе он также выводится из потока

Ason 09.08.2018 00:13

@ConnorsFan Да, это хорошее решение, я, скорее всего, выберу что-то вроде этого. Не так элегантно, как можно было бы надеяться, но не так хитро, как другие мои попытки.

rjustin 09.08.2018 00:14

Если вы предпочитаете один из двух, я мог бы опубликовать ответ.

ConnorsFan 09.08.2018 00:15

@LGSon Чтобы позиция была абсолютной в элементе, на который наведен курсор, необходимо, чтобы контейнер был position: relative. Этого я не могу гарантировать. Мне это нравится как решение, и я бы поддержал, если вы опубликуете его в качестве ответа.

rjustin 09.08.2018 00:17

@ConnorsFan Используется ли декоратор hostlistener? Или все это происходит через прослушиватели событий?

rjustin 09.08.2018 00:19

Я использую HostListener в том случае, когда вы исключаете дочерний компонент из «зоны наведения» (см. код). Я использую прослушиватели событий для обработки событий в родительском элементе.

ConnorsFan 09.08.2018 00:22

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

rjustin 09.08.2018 00:24

Затем вам следует взглянуть на то, что предлагает денди, что я также сделал в комментарии, но я использовал глобальный селектор * и уникальный класс, например *:hover .smaller_square { background: red; }. К этому вы можете добавить дочерний селектор >, если необходимо, если сузить его еще больше.

Ason 09.08.2018 00:25

Я подожду, чтобы увидеть, сможете ли вы заставить его работать с решением CSS, предложенным danday74 и LGSon.

ConnorsFan 09.08.2018 00:46
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
25
905
1

Ответы 1

В HTML-коде маленького квадрата оберните его в div:

<div class = "small-square">
  // rest of HTML
</div>

В CSS маленького квадрата:

.small-square:hover {
  // styles
}

Почему ты не можешь этого сделать? Извините, если я не совсем понимаю вопрос.

ОБНОВИТЬ:

Вы можете сделать это в своей глобальной таблице стилей (AKA styles.css):

.large-square:hover .small-square {
  // styles for small square when large square is hovered
}

ОБНОВЛЕНИЕ 2:

Не уверен, поддерживает ли контекст хоста использование: hover следующим образом:

:host-context(.large-square:hover) .small-square {
  // styles for small square when large square is hovered
}

:host-context(*:hover) .small-square {
  // styles for small square when large square is hovered
}

Если это не так, я думаю, у вас нет другого выбора, кроме как использовать глобальную таблицу стилей.

Я ценю ответ! «Маленький квадрат» может входить в состав многих содержащихся элементов. Размер не будет известен. Ребенок или «квадратик» не должен знать о своем контейнере. но когда контейнер зависает, дочерний элемент должен получить стиль.

rjustin 08.08.2018 23:42

(1) независимо от того, в каком элементе он находится, он все равно должен менять цвет при наведении? (2) Я не вижу релевантности размера (3), когда родительский контейнер зависает, дочерний должен получить стиль? или когда ребенок зависает, ребенок должен получать стиль?

danday74 08.08.2018 23:44

при наведении курсора на родительский элемент дочерний элемент должен получить стиль. Это не может быть реализовано в родительском элементе. Смотрите изображение, которое я добавил в пост, спасибо!

rjustin 08.08.2018 23:51

Я бы хотел избежать глобального стиля. реализация должна быть внутри ребенка.

rjustin 09.08.2018 00:22

Также малый квадрат может быть добавлен динамически, а большой квадрат не может быть применен.

rjustin 09.08.2018 00:22

должен быть какой-то селектор CSS, который всегда будет указывать на большой квадрат, даже если это не класс, в качестве альтернативы вы не можете просто обернуть большой квадрат в большой квадратный класс?

danday74 09.08.2018 00:25

Как я прокомментировал выше, используйте глобальный селектор, например *:hover .smaller_square {background: red;} ... и, возможно, в комбинации с дочерним селектором >

Ason 09.08.2018 00:28

@LGSon Это тоже хороший вариант, мне нужно было бы проверить, что он работает в классе компонентного css с учетом эмуляции shadow dom, но теоретически это должно работать.

rjustin 09.08.2018 00:30

Другие вопросы по теме