CSS：當懸停在內容上時更改背景

僅使用CSS就可以將鼠標懸停在頁面上影響正文背景的元素上？CSS：當懸停在內容上時更改背景

我基本上想要更改頁面的背景「bg」，如果他們將鼠標懸停在該頁面中的「文章」類上。

<body class="bg"> <div class="article"></div> </body>

來源

2013-07-11 Timothy Eberly

號見http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector獲取更多信息。 – lifetimes

你可以[假]（http://jsfiddle.net/TWt2D/），雖然我永遠不會推薦它。我會改用JavaScript –

你不能直接，如CSS不能向上DOM樹（還）。

然而，您可以通過爲您的文章添加一個帶有背景的僞元素並使其覆蓋整個背景來模仿效果。

看一看這樣：http://jsfiddle.net/QRrnj/

.article:hover:before { 
    content:''; 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url(http://placekitten.com/500/500) no-repeat center; 
    background-size: cover; 
}

來源

2013-07-11 21:16:30 Pevara

不錯的解決方案，但總是有使用'：before'僞選擇符的向後兼容性參數：[browser-support-pseudo-element]（http://css-tricks.com/browser-支撐僞元素/）。然而，這絕對是一個我會使用的工作，如果我正在避免JavaScript –

@MyHeadHurts幸運的是，我不再需要支持IE7（有史以來最好的新年禮物），所以我可以儘可能多地使用僞元素。好點難... – Pevara

我相信這是我一直在尋找的。謝謝！ –

CSS：當懸停在內容上時更改背景

回答

相關問題