title: Apply css style to element when its container/parent element is hovered Angular
body: <p>When I hover over the container of an element I want the element to receive a visual change with css/scss.</p>
  
  <p>requirements:
  - Needs to happen from within the child component or sass file. cannot know about parent child relationship.
  - sass css or within angular component</p>
  
  <p>I have tried host listener decorator in angular but that is just the host element rather than its parent.</p>
  
  <p>I have tried :host and :host-context selectors but had similar experience to host listener.</p>
  
  <p>any suggestions would be greatly appreciated.</p>
  
  <p>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.</p>
  
  <p>CLARIFICATION:</p>
  
  <p><a href="https://i.stack.imgur.com/Ndmtc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ndmtc.png" alt="enter image description here"></a></p>