改變身體背景圖像/梯度上懸停其他元素

我試圖改變背景圖像/身體的徘徊在div（id =「上面」）的身體的漸變，我遵循他們在另一個職位（ http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements），但它似乎並不工作改變身體背景圖像/梯度上懸停其他元素

CSS

body { 
    background: -webkit-gradient(radial, ...); 
} 

.about:hover body{ 
    background: -webkit-gradient(radial, ...); // new gradient 
}

HTML

<body> 
    <div class="about"> 
     <h1 id="title">About</h1> 
     <div> 
      <p id="about">stuff</p> 
     </div> 
    </div> 
</body>

這沒有效果，我甚至tr y以測試，如果這個工程通過更改標題樣式爲斜體，而徘徊，仍然沒有用

.about:hover h1.title { 
    font-weight: italic; 
}

是，我使用的是錯誤的或有別的方式，任何人都可以幫忙嗎？

來源

2012-08-13 ryf9059

CSS從父工程的孩子，你不能從一個孩子引用父元素。 – TheZ 2012-08-13 19:06:41

'font-weight：italic;'無效應該是'font-style：italic' – Musa 2012-08-13 19:10:29

另外，沒有'h1.title'，只有'h1＃title'。 – Cokegod 2012-08-13 19:10:43

如果你想用CSS（不需要JavaScript）來做到這一點，你可以用z-index一招：

見這裏的一個例子：http://jsfiddle.net/nCyJ4/

或者，你的情況，http://jsfiddle.net/nCyJ4/1/：

HTML：

<div class="initial background" id="bg0"></div> 
<div class="about bgwrapper"> 
    <h1 id="title">About</h1> 
    <div> 
     <p id="about">stuff</p> 
    </div> 
    <div id="bg1" class="background"></div> 
</div>

CSS：

.background{ 
    position:fixed; 
    top:0;left:0; 
    width:100%;height:100%; 
    display:none; 
    z-index:-1; 
} 
.bgwrapper:hover>.background,.initial.background{ 
    display:block; 
} 
.initial.background:hover{ 
    display:block!important; 
} 
.background:hover{ 
    display:none!important; 
} 
#bg0{ 
    background: -moz-linear-gradient(left, #FF0000 0%, #FF9900 10%, #FFFF00 16.666%, #CCFF00 20%, #32FF00 30%, #00FF00 33.333%, #00FF65 40%, #00FFFF 50%, #00FFFF 50%, #0065FF 60%, #0000FF 66.666%, #3300FF 70%, #CB00FF 80%, #FF00FF 83.333%, #FF0098 90%, #FF0004 100%); 

} 

#bg1{ 
    background: -moz-linear-gradient(left center, #FF0000, #000000) repeat scroll 0 0 transparent 
}

來源

2012-08-13 19:22:34 Oriol

由於body不是div.about的後代，因此不能將其作爲目標。你可以使用一些JavaScript來達到你需要的效果。

CSS

body { 
    background: -webkit-gradient(radial, ...); 
} 

body.hover { 
    background: -webkit-gradient(radial, ...); // new gradient 
}

的JavaScript

document.getElementsByClassName('about')[0].onmouseover = function() { 
    document.getElementsByTagName('body')[0].className += ' hover'; 
} 
document.getElementsByClassName('about')[0].onmouseout = function() { 
    var n = document.getElementsByTagName('body')[0]; 
    n.className = n.className.replace('hover', ''); 
}

來源

2012-08-13 19:18:41

我實際上想要使用CSS，因爲我想將它與最新的過渡技術結合起來，以便我的背景漸變順利進行，JavaScript會實現這種效果嗎？ – ryf9059 2012-08-14 16:04:18

您可以使用jQuery爲動畫製作動畫...但也許您最好的方法是改變您的標記而不是腳本，就像@Oriol在他/她的回答中所述。 – 2012-08-16 18:57:52

改變身體背景圖像/梯度上懸停其他元素

回答

相關問題