1

bodyユーザーがそのページのサムネイルにカーソルを合わせたときに、ページ全体の の背景色を変更しようとしています (サムネイルはdiv内にありますbody)。CSSのみを使用してこれを行う方法はありますか?

4

3 に答える 3

6

答え: いいえ。

div上に移動し、 の親を選択し、次に の親を選択するdiv必要があります... に到達するまでbody。CSS のみを使用して要素の親を選択する方法はありません (理由を知りたい場合は、この記事が役に立つかもしれません)... まだ (ただし、CSS4には親セレクターがあります)。

これを行うには JavaScript が最適で、非常に簡単です。

このようなものがある場合：

<div class='change-bg'></div>​

HTML では、JavaScript は次のようになります。

var el = document.querySelector('.change-bg');
el.addEventListener('mouseover', function(){
    document.body.style.backgroundColor = 'red';
}, true);
el.addEventListener('mouseout', function(){
    document.body.style.backgroundColor = 'black';
}, true);

デモ: http://jsfiddle.net/thebabydino/TDSUL/

jQuery を使用している場合は、さらに簡単になります。

$('.change-bg').hover(function(){
    $('body').css({'background': 'red'})},
function(){
    $('body').css({'background': 'black'})
});​​

デモ: http://jsfiddle.net/thebabydino/YWDeA/

于 2012-07-21T23:34:09.920 に答える
1

不可能です。例のように、JSを使用してください：

<div data-bgcolor="red"><div>    

$("div").mouseover(function(){
  $("body").css("background-color", $(this).attr("data-bgcolor"));
})
于 2012-07-21T23:36:13.167 に答える
0

そうではありません。CSS セレクターを介して子孫の属性を変更できますが、祖先の属性は変更できません。XPath ではそのようなことは可能ですが、CSS では不可能です。したがって、この場合は JavaScript に頼る必要があると思います。

于 2012-07-21T23:34:32.260 に答える