Change background-image when hovering over a link?

Question

I am currently trying to change the entire page background when I hover over two different links, rather than the background of the link which is occurring now. Any help on this would be greatly appreciated!

home.component.html

<div class="home">
  <app-header></app-header>
  <div class="locations">
    <p>4698 5th Ave - New York, NY </p>
    <a routerLink="/gotham" routerLinkActive="active">GOTHAM</a>
    <a routerLink="/zion" routerLinkActive="active">ZION</a>
  </div>
</div>

home.component.css

a {
  color: white;
  text-decoration: none;
  display: inline;
  font-size: 4vw;
  margin: 0;
  font-weight: normal;
  padding: 30px;
}

a:hover {
  text-decoration: underline;
  background-image: url('https://images.unsplash.com/photo-1531973819741-e27a5ae2cc7b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');;
}

Answer 1

is that you want something like this

 a { color: white; text-decoration: none; display: inline; font-size: 4vw; margin: 0; font-weight: normal; padding: 30px; }.locations:hover { text-decoration: underline; background-image: url('https://images.unsplash.com/photo-1531973819741-e27a5ae2cc7b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');; }

 <div class="home"> <app-header></app-header> <div class="locations"> <p>4698 5th Ave - New York, NY </p> <a routerLink="/gotham" routerLinkActive="active">GOTHAM</a> <a routerLink="/zion" routerLinkActive="active">ZION</a> </div> </div>

Answer 2

You can use this syntax if they are siblings.

a:hover + .siblingClass { 
  property: value; 
}

Answer 3

IMO you'd need plain JS for this. First assign Ids to each of your links. Then set up listeners for mouseover and mouseout events. https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event

document.getElementById("link1").onmouseover = (e) => document.body.style.backgroundImage = "url(https://your.image.url.for.link1)"


document.getElementById("link2").onmouseover = (e) => document.body.style.backgroundImage = "url(https://your.image.url.for.link2)"


document.getElementById("link1").onmouseout = (e) => document.body.style.backgroundImage = ""

document.getElementById("link2").onmouseout = (e) => document.body.style.backgroundImage = ""