[英]Change background-image when hovering over a link?
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.当我 hover 通过两个不同的链接时,我目前正在尝试更改整个页面背景,而不是现在发生的链接背景。 Any help on this would be greatly appreciated!
对此的任何帮助将不胜感激!
home.component.html 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 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');;
}
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>
You can use this syntax if they are siblings.如果他们是兄弟姐妹,您可以使用此语法。
a:hover + .siblingClass {
property: value;
}
IMO you'd need plain JS for this. IMO 你需要普通的 JS。 First assign Ids to each of your links.
首先为每个链接分配 ID。 Then set up listeners for mouseover and mouseout events.
然后为 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
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 = ""
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.