更改鏈接懸停時的正文背景顏色

Question

我怎樣才能改變頁面背景當鼠標在盤旋a ？ 我正在尋找一個只有css的解決方案。

我知道你可以通過CSS到達兒童元素，但我不知道你是否可以到達身體。

Answer 1

看看這個DEMO

這是html一部分

<a href="">link 1</a>

這是css

body {
        background: lightblue;
    }
    a:hover:before {
        content: '';
        position: fixed;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
        background-color: grey;
    }

Answer 2

雖然邁克羅斯的演示解決了你的問題，但它沒有解釋它的工作原理或原因。 它也可以大大簡化。

基本上你想在你的元素上使用::before表示法。 這將創建一個偽元素，該元素是關聯元素的第一個子元素，您可以為其應用額外的樣式。 然后，您可以設置::before選擇器樣式以使用特定背景顏色填充屏幕。 例如：

<a class="special">Test</a>

.special:hover:before{
    content: '';
    position: fixed;
    display: block;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color: #ff0000;
}

你不需要在那里或其他任何nth-of-type 。 見我的小提琴這里 。 您需要做的就是確保before元素是全屏，在z順序的后面並且具有特定的顏色。