html - HTML5 と CSS3 のみを使用してボディの背景色を変更する..?

Question

jquery ではなく CSS3 と HTML5 を使用するだけでwww.lutmedia.comと同じ効果を得ることができますか? リスト項目のリンクにカーソルを合わせると、本文の背景色が変わる場所..?

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