CODEWITHSUNDEEP
cssangularsass
rjustin
rjustin

Reputation: 1439

Apply css style to element when its container/parent element is hovered Angular

When I hover over the container of an element I want the element to receive a visual change with css/scss.

requirements: - Needs to happen from within the child component or sass file. cannot know about parent child relationship. - sass css or within angular component

I have tried host listener decorator in angular but that is just the host element rather than its parent.

I have tried :host and :host-context selectors but had similar experience to host listener.

any suggestions would be greatly appreciated.

EDIT: To visualize this I could have a small square element inside a large square element, then when the space where small square element does not overlap the area of the large square element is hovered, the small square receives a style.

CLARIFICATION:

enter image description here

Upvotes: 0

Views: 1476

Answers (1)

danday74
danday74

Reputation: 57165

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.

Upvotes: 1

Related Questions