改变只使用HTML5和CSS3身体的背景颜色..?(Changing body background

2019-08-17 06:59发布

是否有可能实现在这里发现了同样的效果: www.lutmedia.com只需使用CSS3和HTML5 ...而不是jQuery的..? 凡在列表项的链接上悬停身体背景颜色的变化..?

Answer 1:

是的,你可以得到这样的纯CSS的效果,但它不会是身体变化的背景,但在菜单其中有一个最后的列表项position: fixed和覆盖整个页面。

快速演示

有关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 */


文章来源: Changing body background color using only HTML5 and CSS3..?