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

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" >
  <div fxFlex="100%" fxLayoutAlign="center">
    <!--here there is an image-->
  </div>
  <div fxFlex="100%"  fxHide fxShow.gt-lg>
    <h2 [ngClass]="{'gradient' : this.gradient,'lighter':lighter, 'zoom':zoom,  'scale':1.2}" style="margin: 0;" >
      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/

CodePudding user response：

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 >
  This is a text
  <div >highlight this text</div>
  More text
</div>

CodePudding user response：

I recommend you to use centered-text class instead of zoom class. Because it is easier to give a transparent padding to it so you can have the "approaching" animation played without needing to hover directly on the text. This code will fix your problem the moment you copy paste it to your Custom CSS:

.centered-text {
  transition: all 0.3s;
  margin: 0 auto;
  padding:13px;
}

.centered-text:hover {
  transform: scale(1.4);
  color: #00D3FF;
  transition: all 0.3s;
}