Quiero tener dos enlaces diferentes y al pasar el mouse sobre uno, cambia todo el fondo de la PÁGINA a una URL de imagen de fondo diferente. Luego, cuando paso el mouse sobre el segundo enlace, cambia la URL de la imagen de fondo a otra imagen. es posible? Estoy usando Angular, al principio estaba pensando que podría hacer esto en css, pero ahora creo que se requerirá algo más. Cualquier orientación sería muy apreciada.
No será posible con CSS puro porque los selectores no pueden ascender .
Sin embargo, lo que está tratando de lograr se puede hacer fácilmente. Simplemente adjunte eventos de desplazamiento a los enlaces y en los controladores de eventos, agregue una cierta clase de CSS a la página. Y luego definir los estilos para esa clase, por supuesto.
Para agregar la clase, lo que debe hacer es establecer un valor de estado en un valor determinado y en el elemento de la página, agregue *ngClass="{bgLink1: hovered === 'link1'}" o algo así. Entiendes la idea.
<!DOCTYPE html> <html> <body> <a href="https://stackoverflow.com" id="link1"></a> <a href="https://stackoverflow.com/questions" id="link2"></a> </body> <style> body { background: red; display: flex; justify-content: center; align-items: center; } #link1 { margin: 5vw; } #link2 { margin: 5vw; } #link1:hover body { background: url('');/*any url you want for the picture*/ } #link2:hover body { background: url('');/*another url you want for the other picture*/ } </style> </html>Realmente espero poder ayudarlo, si no, no estaría de más escribir la pregunta en otro momento, pero con un código o algo así, puedo entender lo que quiere.