只使用HTML5和CSS3改变主体背景颜色..? [英] Changing body background color using only HTML5 and CSS3..?
本文介绍了只使用HTML5和CSS3改变主体背景颜色..?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
可以实现与此处相同的效果: www.lutmedia.com 只需使用CSS3和HTML5 ...而不是jquery ..? ?
Is it possible to achieve the same effect found here: www.lutmedia.com simply using CSS3 and HTML5...and not jquery..? Where the body background color changes on hover over the list item links..?
推荐答案
是的,你可以得到一个类似的效果使用纯CSS,但是它不会是正在改变背景,而是在菜单中的最后一个列表项,它具有 position:fixed
并覆盖整个页面。
Yes, you could get an effect like that with pure CSS, but it won't be the body changing background, but a last list item in that menu which has position: fixed
and covers the entire page.
相关 HTML :
<ul class='menu'>
<li><a href='#'>contact</a></li>
<li><a href='#'>blog</a></li>
<!-- and so on, menu items -->
<li class='bg'></li>
</ul>
相关 CSS :
.menu li { display: inline-block; }
.menu li:first-child a { color: orange; }
.menu li:nth-child(2) a { color: lime; }
/* and so on for the other menu items */
.menu:hover li a { color: black; }
.menu li a:hover { color: white; }
.bg {
position: fixed;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: dimgrey;
transition: .5s;
pointer-events: none;
}
.menu li:first-child:hover ~ .bg { background: orange; }
.menu li:nth-child(2):hover ~ .bg { background: lime; }
/* and so on for the other menu items */
这篇关于只使用HTML5和CSS3改变主体背景颜色..?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文