將鼠標懸停在鏈接上時更改背景圖像？

Question

當我 hover 通過兩個不同的鏈接時，我目前正在嘗試更改整個頁面背景，而不是現在發生的鏈接背景。 對此的任何幫助將不勝感激！

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

你想要這樣的東西嗎

 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

如果他們是兄弟姐妹，您可以使用此語法。

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

Answer 3

IMO 你需要普通的 JS。 首先為每個鏈接分配 ID。 然后為 mouseover 和 mouseout 事件設置偵聽器。 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 = ""