css - 当其容器/父元素悬停时将css样式应用于元素

Question

当我将鼠标悬停在元素的容器上时，我希望元素接收 css/scss 的视觉变化。

要求： - 需要在子组件或 sass 文件中发生。无法了解父子关系。- sass css 或在角度组件内

我已经尝试过有角度的主机侦听器装饰器，但这只是主机元素而不是它的父元素。

我尝试过 :host 和 :host-context 选择器，但与主机侦听器有类似的经验。

任何建议将不胜感激。

编辑：为了形象化，我可以在一个大方形元素内有一个小方形元素，然后当小方形元素与大方形元素的区域不重叠的空间悬停时，小方形接收一个样式。

澄清：

标签： cssangularsass

Answer 1

In the HTML of the small square, wrap it with a div:

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

In the CSS of small square:

.small-square:hover {
  // styles
}

Why can't you do this? Sorry if I don't fully understand the question.

UPDATE:

You could do this in your global stylesheet (AKA styles.css):

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

UPDATE 2:

Not sure if host context would support use of :hover as follows:

: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
}

If it doesn't then I think you have no choice but to use global stylesheet.