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

FOCS 0
Viewed 43

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/

typescript css angular html
2 Answers

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>

LinkinTED0

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;
}
Selcuk xD0
Related