Is there a way to change the appeareance of an html text when hovering on the div that contains it?

Issue

I need to color and zoom the text when the cursor "approaches" the text (so basically when the mouse enters the area of the div surrounding the text). Right now i can make it work coloring the text only when i hover directly on it. I'll paste a snippet of the code.

HTML:

<div fxLayout="row wrap" class="max container">
  <div fxFlex="100%" fxLayoutAlign="center">
    <!--here there is an image-->
  </div>
  <div fxFlex="100%" class="centered-text" fxHide fxShow.gt-lg>
    <h2 [ngClass]="{'gradient' : this.gradient,'lighter':lighter, 'zoom':zoom,  'scale':1.2}" style="margin: 0;" class="font">
      hoverMe
    </h2>
  </div>
</div>

Typescript:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'iet-box-academy',
  templateUrl: './box-academy.component.html',
  styleUrls: ['./box-academy.component.scss']
})

export class BoxAcademyComponent implements OnInit {
  @Input() scale = 1;
  @Input() img = '';
  @Input() title = 'TITOLO';
  @Input() descr = '';
  @Input() align = "centerer";
  @Input() lighter = false;
  @Input() zoom = true;
  @Input() gradient: boolean = false;

  constructor() {
  }

  ngOnInit(): void {
  }
}

CSS:

.container {
  position: relative;
  text-align: center;
  color: black;
}

.zoom {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5);
  color: #00D3FF;
}

https://jsfiddle.net/wdfc7g9a/14/

Solution

You can add the :hover to the parent and add a child selector:

Change:

.zoom:hover {
  transform: scale(1.5);
  color: #00D3FF;
}

To:

.container:hover .zoom {
  transform: scale(1.5);
  color: #00D3FF;
}

Demo:

.container {
  border: 1px solid red;
}

.container:hover .zoom {
  background: yellow;
}

<div class="container">
  This is a text
  <div class="zoom">highlight this text</div>
  More text
</div>

Answered By - LinkinTED