Изменение цвета фона тела с использованием только HTML5 и CSS3 ..?

Question

Можно ли добиться такого же эффекта, который можно найти здесь: www.lutmedia.com просто используя CSS3 и HTML5 ... а не jquery ..? Где цвет фона тела изменяется при наведении на ссылки на элемент списка??

Answer 1

Да, вы можете получить такой эффект с помощью чистого CSS, но это не будет фон смены тела, но последний элемент списка в этом меню, который имеет position: fixed и охватывает всю страницу.

QUICK DEMO

Соответствующие 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 */