Когда я наводил курсор на контейнер элемента, я хочу, чтобы элемент получил визуальное изменение с помощью css / scss.
требования: - Должен происходить из дочернего компонента или файла sass. не может знать об отношениях между родителями и детьми. - sass css или в угловом компоненте
Я пробовал декоратор прослушивателя хоста в angular, но это просто элемент хоста, а не его родительский элемент.
Я пробовал селекторы: host и: host-context, но имел аналогичный опыт работы с хост-слушателем.
Любые предложения будут ценны.
Обновлено: Чтобы визуализировать это, я мог бы иметь небольшой квадратный элемент внутри большого квадратного элемента, тогда, когда пространство, где маленький квадратный элемент не перекрывает площадь большого квадратного элемента, зависает, маленький квадрат получает стиль.
РАЗЪЯСНЕНИЕ:
@ConnorsFan дочерний элемент является угловым компонентом.
Для этого, используя только CSS, вам понадобятся 2 элемента внутри вашего больший квадрат, один, который заполняет больший квадрат, который получает правило наведения, и меньший квадрат. Главный ключ здесь в том, что маленький квадрат не может быть потомком квадрата с правилом наведения.
@ConnorsFan Цель состоит в том, чтобы сделать это изнутри дочернего элемента, ничего не зная о контейнере / родителе.
Итак, чтобы прояснить, что я имел в виду, для решения, использующего только CSS, оно должно быть таким: jsfiddle.net/6egc7f21
@LGSon Я вижу, к чему вы клоните, и результат, по сути, тот же. Ключевым моментом, который я ищу, является то, что все это реализовано в дочернем элементе без какого-либо ведома родителя. Я не хотел путать отношения. Это будет родительский ребенок, и родительский элемент (даже поверх дочернего) в порядке.
@rjustin Но это именно то, что делает моя рабочий пример
Значит, стиль должен задаваться даже при наведении указателя мыши на ребенка?
@ConnorsFan: Да, но меня это не волнует. Просто, когда родительский элемент зависает где-нибудь (наиболее важно те части, где дочерний элемент не перекрывается), тогда дочерний элемент получает стиль.
Вот модифицированная версия, которая может лучше показать, что я имею в виду: jsfiddle.net/6egc7f21/1 ... и, как вы можете видеть, ни одно из зависаний не связано с контейнером
Может быть, один из этих двух стеков будет делать то, что вы хотите: stackblitz1, stackblitz2. Я сделал это с прослушивателями событий, потому что вы хотите контролировать все, начиная с дочернего элемента, а в CSS нет «родительского» селектора.
Другой вариант: если ваш меньший квадрат является дочерним по отношению к контейнеру, использовать это правило CSS: *:hover .smaller_square { background: red; }
@LGSon Хорошо, я понимаю, к чему вы клоните, имея два элемента, один из которых покрывает весь родительский элемент только для прослушивания при наведении курсора. Это умно, но это будет конфликтовать с другими детьми, которые присутствуют, но не в стороне от этого процесса. См. Изображение в сообщении (Золотая звезда будет затронута, хотя она не используется для этого наведения).
Нет, не будет, так как при наведении звезды ничего не произойдет с маленький квадрат. Сложите все вместе, и вы увидите ... и вот обновление моей скрипки: jsfiddle.net/6egc7f21/2
И еще один образец: jsfiddle.net/6egc7f21/3
@LGSon Хорошо, да, это правильно, хотя я использую макет Flexbox (который не упоминался в сообщении), вызывает ли это проблема с макетом?
Нет, не понимаю, как это что-то изменит. При использовании абсолютного позиционирования на гибком элементе он также выводится из потока
@ConnorsFan Да, это хорошее решение, я, скорее всего, выберу что-то вроде этого. Не так элегантно, как можно было бы надеяться, но не так хитро, как другие мои попытки.
Если вы предпочитаете один из двух, я мог бы опубликовать ответ.
@LGSon Чтобы позиция была абсолютной в элементе, на который наведен курсор, необходимо, чтобы контейнер был position: relative. Этого я не могу гарантировать. Мне это нравится как решение, и я бы поддержал, если вы опубликуете его в качестве ответа.
@ConnorsFan Используется ли декоратор hostlistener? Или все это происходит через прослушиватели событий?
Я использую HostListener
в том случае, когда вы исключаете дочерний компонент из «зоны наведения» (см. код). Я использую прослушиватели событий для обработки событий в родительском элементе.
@ConnorsFan ах, я вижу, либо это хорошее решение. возможно, разместите один с исключением ребенка, чтобы другие могли его получить, но удалите его, если они этого не хотят.
Затем вам следует взглянуть на то, что предлагает денди, что я также сделал в комментарии, но я использовал глобальный селектор *
и уникальный класс, например *:hover .smaller_square { background: red; }
. К этому вы можете добавить дочерний селектор >
, если необходимо, если сузить его еще больше.
Я подожду, чтобы увидеть, сможете ли вы заставить его работать с решением CSS, предложенным danday74 и LGSon.
В 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
}
Если это не так, я думаю, у вас нет другого выбора, кроме как использовать глобальную таблицу стилей.
Я ценю ответ! «Маленький квадрат» может входить в состав многих содержащихся элементов. Размер не будет известен. Ребенок или «квадратик» не должен знать о своем контейнере. но когда контейнер зависает, дочерний элемент должен получить стиль.
(1) независимо от того, в каком элементе он находится, он все равно должен менять цвет при наведении? (2) Я не вижу релевантности размера (3), когда родительский контейнер зависает, дочерний должен получить стиль? или когда ребенок зависает, ребенок должен получать стиль?
при наведении курсора на родительский элемент дочерний элемент должен получить стиль. Это не может быть реализовано в родительском элементе. Смотрите изображение, которое я добавил в пост, спасибо!
Я бы хотел избежать глобального стиля. реализация должна быть внутри ребенка.
Также малый квадрат может быть добавлен динамически, а большой квадрат не может быть применен.
должен быть какой-то селектор CSS, который всегда будет указывать на большой квадрат, даже если это не класс, в качестве альтернативы вы не можете просто обернуть большой квадрат в большой квадратный класс?
Как я прокомментировал выше, используйте глобальный селектор, например *:hover .smaller_square {background: red;}
... и, возможно, в комбинации с дочерним селектором >
@LGSon Это тоже хороший вариант, мне нужно было бы проверить, что он работает в классе компонентного css с учетом эмуляции shadow dom, но теоретически это должно работать.
Дочерний элемент (маленький квадрат в вашем примере) - это компонент Angular или просто элемент HTML?