將滑鼠懸停在鏈接上時更改背景影像？-有解無憂

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

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');;
}

uj5u.com熱心網友回復：

是你想要這樣的東西嗎

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>

uj5u.com熱心網友回復：

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

a:hover   .siblingClass { 
  property: value; 
}

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/429126.html

標籤：html css 有角度的

上一篇：如何在媒體查詢中將最后一個塊代替第一個塊

下一篇：模板繼承在go中創建空白頁面