3

Webページにボタンがあります。CSS疑似クラスを使用して、カーソルがボタンの上にあるときにドキュメントの別の部分に変更を加えたいと思います。これは私が試したことです：

<div id="content">
    <p id="foo">blah blah blah</p>
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div id="bar">bar</div>
    </div>
</div>

そして、対応するスタイルシート：

#bar:hover #foo {
    color: green;
}

しかしもちろん、これは機能しません。CSSでは、フォーマットのセレクターを使用して要素の子孫A Bを選択することしかできないためです。新しいCSS3仕様では、いくつかの新しい疑似クラスを使用する兄弟要素を選択することができます。BAA

Bしかし、遠い従兄弟に似ている1つ（または複数）の要素を選択する方法はありますAか？

私はいくつかの解決策を考えていました。1つ：Javascriptを使用します。ブラウザでJSが無効になっているページを閲覧している人がいる場合に備えて、JSを使用せずにページを完全に機能させることを望んでいるため、これはあまり魅力的ではありません。また、私は物事をシンプルに保つことを望んでいます。2番目の解決策：foodivをdiv内に配置しbar、を使用position: absoluteして最終的に目的の場所に移動fooします。明らかな理由から、これは厄介な解決策です。

4

3 に答える 3

2

ええ、でもCSSではありません。JavaScriptを使用します。これがjQueryの例です。

$('#bar').hover(
  function(e) {
    $foo = $('#foo');
    $foo.data('prevColor', $foo.css('color'));
    $foo.css('color', 'green');
  },
  function(e) {
    $foo = $('#foo');
    $foo.css('color', $foo.data('prevColor'));
  }
);
于 2013-03-07T04:14:07.397 に答える
2

コンテナ内に配置してから、コンテナのDOMフローの外側に絶対に配置して、同じ効果を得ることができます。それは完全に理想的ではありませんが、それは可能です：

<div id="content">
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div class="foo" id="bar">bar<p id="foo">blah blah blah</p></div>
    </div>
</div>

#content {
    height:80px;
}

#foo {
    position:absolute;
    top:40px;
}

#bar:hover #foo {
    color: green;
}

http://jsfiddle.net/Uyypc/

于 2013-03-07T04:19:42.667 に答える
1

「親」セレクター

現在、CSSで要素の親を選択する方法はありません。

それを行う方法があれば、それはCSSセレクターの仕様（CSS 2または3）に含まれます。

CSS3セレクター仕様と CSS2セレクター仕様

それまでの間、親要素を選択する必要がある場合は、JavaScriptを使用する必要があります。

CSS Selectors 4 Specは、！を使用してセレクターの「サブジェクト」を定義するための構文を提供します。サイン。2012年現在、これはどのブラウザでも利用できません。

CSS4セレクターを使用すると、元の質問は次のように解決できます。

li! > a.active { /* styles to apply to the li tag */ }

MooToolsはここ数年CSSレベル4セレクターをサポートしてきました-皮肉なことに、MooToolsのSlickセレクターエンジンは、スペックドラフトが公開される前にこれらのセレクターを実際に処理できました->セレクターに別のサブジェクトを指定するにはどうすればよいですか？

于 2013-03-07T04:20:57.133 に答える