Changer la couleur de fond du corps en utilisant seulement HTML5 et CSS3 ..?

Question

Est-il possible d'obtenir le même effet que celui trouvé ici: www.lutmedia.com simplement en utilisant CSS3 et HTML5 ... et non jquery ..? Où la couleur de fond du corps change sur le pointeur sur les liens d'article de liste ..?

Answer 1

Oui, vous pouvez obtenir un effet similaire à celui du CSS pur, mais ce ne sera pas l'arrière-plan du corps qui change, mais un dernier élément de la liste qui a position: fixed et qui couvre toute la page.

QUICK DEMO

pertinentes 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> 

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