Tengo un esquema MatFormField como este:
<mat-form-field appearance="outline"> <input matInput ...> </mat-form-field>Muestra un contorno agradable cuando se desplaza.
Quiero crear el mismo efecto de contorno flotante en este elemento pero programáticamente mientras el usuario pasa el mouse sobre otro elemento en la página.
¿Es posible crear el efecto de desplazamiento sin desplazar el elemento?
Lo que probé:
focus() la entrada. Sin embargo, eso no es lo que quiero.ng-deep o similar) no es una opción, ya que estos pueden cambiar con las actualizaciones.Un enfoque simple es capturar el evento del mouseover en "otro elemento en la página" y cambiar el estilo del elemento de destino.
html
<input (mouseover)="hover(true)" (mouseout)="hover(false)" /> <mat-form-field appearance="outline"> <input matInput id="myInput" /> </mat-form-field>y usando una función simple
hover(hover) { document.getElementById('myInput').style['border-color'] = hover ? 'red' : 'black'; }