僅使用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 */