Change background-image when hovering over a link?-CodePudding

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 >
  <app-header></app-header>
  <div >
    <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');;
}

CodePudding user response：

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 >
  <app-header></app-header>
  <div >
    <p>4698 5th Ave - New York, NY </p>
    <a routerLink="/gotham" routerLinkActive="active">GOTHAM</a>
    <a routerLink="/zion" routerLinkActive="active">ZION</a>
  </div>
</div>

CodePudding user response：

You can use this syntax if they are siblings.

a:hover   .siblingClass { 
  property: value; 
}

CodePudding user response：

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 = ""