hover link to change *PAGE* background color with css(悬停链接以使用 css 更改 *PAGE* 背景颜色)
问题描述
是否可以在使用 css 将鼠标悬停在页面上单独 div 中的不同链接上时更改整个页面背景?我对JS不是很熟悉,所以如果JS是强制性的,就需要解释一下.感谢任何帮助.谢谢!
Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!
推荐答案
嗯,这是有可能的.您实际上不会更改页面的背景,但效果会相似.
Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.
看看代码.
body {
background: lightblue;
}
a:hover:before {
content: '';
position: absolute;
display: block;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
}
li:nth-of-type(1) a:hover:before {
background-color: blue;
}
li:nth-of-type(2) a:hover:before {
background-color: red;
}
li:nth-of-type(3) a:hover:before {
background-color: green;
}
基本上,当光标悬停在链接上时,您只需创建一个伪元素.该伪元素的上、下、左、右的绝对位置等于 0,将占据整个屏幕,并给它一个 z-index -1 将确保它低于页面上的所有其他元素.当然,您在相应的伪元素中声明背景颜色或图像.
Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.
不过,有一个缺点.它不太灵活.例如,如果任何祖先元素的位置不是静态(默认),这将有点难以实现——如果不是不可能的话——因为您必须调整顶部、底部、左侧和右侧属性.
There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.
这篇关于悬停链接以使用 css 更改 *PAGE* 背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:悬停链接以使用 css 更改 *PAGE* 背景颜色
基础教程推荐
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01