只改變其CSS3上的元素懸停的元素的樣式

我有一個網站的背景圖像不斷變化，某些元素懸停。圖像通常很暗，但有時很輕。光照圖像的類別.whiteImg應用於它們。只改變其CSS3上的元素懸停的元素的樣式

我已經通過將'背景'圖像設置爲懸停元素的同胞來獲得此功能，只需使用CSS。例如：

HTML：

<ul> 
    <li> 
    <a>link 1</a> 
    <img src="http://foo.com/" /> 
    </li> 
    <li> 
    <a>link 2</a> 
    <img src="http://foo.com/" /> 
    </li> 
    <li> 
    <a>link 3</a> 
    <img src="http://foo.com/" class="whiteImg" /> 
    </li> 
</ul>

CSS：

img{ 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    opacity: 0; 
    transition: opacity 1s; 
} 
li a:hover + img{ 
opacity: 1; 
}

現在，一切工作正常。但默認情況下我有body{color: #fff;}，但當.whiteImg可見時，需要更改爲#000。我試着用jQuery解決這個問題（它是彩色插件），但動畫發生在CSS動畫之後。所以我正在尋找一個純粹的CSS解決方案，使bodycolor更改爲黑色，同時顯示.whiteImg。

有沒有辦法做到這一點？我在尋找類似的東西，以

li a:hover + img.whiteImg < body { 
    color: #000; 
}

這是由this post年底的啓發，但顯然不實際工作。

謝謝。

來源

2013-09-16 sanjaypoyzer

您是否確定要更改整個頁面的顏色？或者只是徘徊的鏈接？如果後者僅僅是'li a：hover {color：＃000}'就足夠了。編輯：另外，爲什麼不使用普通的背景圖像而不是絕對定位的'img'元素？另外2，爲什麼不把圖像放在鏈接裏面？ – powerbuoy

'<'這是一個新的選擇器，我是唯一似乎錯過了？ PS。它無效 –

CSS3中還沒有父級選擇器。你必須爲此使用Javascript。 http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector –

這是唯一的純CSS的解決方案，我能想到的：

http://jsfiddle.net/7K83g/3/

li, li * { 
    position: relative; 
    z-index: 2; 
} 
.whiteImg ~ .fakebg { 
    display: block; 
    position: absolute; 
    z-index: 1; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background: black; 
}

這是一個100％的溶液，使用direction: rtl到正確的位置應用到鏈接。

使用jQuery來代替：

$(document.body).toggleClass("dark");

CSS：

.dark { background: black; color: white; }

會做的伎倆。
示例：http://jsfiddle.net/QKAh6/

來源

2013-09-16 12:43:08

我不想影響懸停的背景，那已經完成了。我試圖影響文本的顏色。 – sanjaypoyzer

觀看編輯。順便說一句，這只是一個概念，訣竅的作用，你必須以正確的方式使用它，但訣竅本身的作品。 –

我知道，但我試圖影響身體上的所有文字的顏色，因爲整個頁面的假背景正在改變 – sanjaypoyzer

由於the post your refer to暗示，>選擇器是一個願望，而不是一個實際的實現。現實是你不能在CSS中選擇父項。

報告還指出另一種方法的jQuery：

$('p:has(img)');

在你的情況，這將是：

$('body:has(img.whiteImg)').css('color', '#fff');

只要運行這個當你觸發的圖像變化。

另外，使其更容易，你可以添加或刪除類的身體的時候，你已經開始在新的圖像褪色。

body { 
    color: #000; 
    transition: color 0.4s; 
} 

body.negative { color: #fff; }

來源

2013-09-16 12:36:30

正如我的問題所說，我試過jQuery，但與css過渡動畫背景衝突。 – sanjaypoyzer

只改變其CSS3上的元素懸停的元素的樣式

回答

相關問題