body
ユーザーがそのページのサムネイルにカーソルを合わせたときに、ページ全体の の背景色を変更しようとしています (サムネイルはdiv
内にありますbody
)。CSSのみを使用してこれを行う方法はありますか?
1463 次
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'})
});
于 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 に答える