html - 親を子から変更しますか?

Question

CSS では、次のことができます。

nav:hover a {

しかし、navいつaホバーされるかを変更する方法はありますか?

score 2 · Accepted Answer

JavaScript イベントを使用するonHover

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

$("a").hover(function () {
    $('#nav').css("color","red");
 });

score 1 · Accepted Answer

セレクター内の明示的なサブジェクトはCSS で使用できるようになりますが、もう少し待つ必要があります。すぐに、たとえばコードで、どの要素がサブジェクトであるかを明示的に宣言できるようになります。

$nav a:hover {
    background: red;
}

これにより、アンカーの子孫のいずれかがホバーされたときに読み取るようにナビゲーションの背景が変更されます。

ソース: セレクターレベル 4 » セレクターのサブジェクトの決定

これが実装されるまでは、JavaScript (または jQuery、Mootools など、JavaScript で構築されたツールの 1 つ) を使用して、このようなタスクを実行する必要があります。

ネストされたアンカーのいずれかの要素がホバーまたは終了したときにクラスを追加および削除することにより、jQuery を使用してこれを実現できます。

$("nav").on("mouseenter mouseleave", "a", function(e){
    $(e.delegateTarget).toggleClass("hovered", e.type === "mouseenter" );
});

score 0 · Accepted Answer

これは最も互換性のある方法です

 $("a").hover(function () { 
    $(this).parent().css({color:"red"}); 
 });

score 0 · Accepted Answer

いいえ、CSSで要素を昇格させる方法はありません。あなたが説明したことを明示的に行うには、いくつかのJSが必要になります。

@ssxは、JSで求めていることを実行するのに近いですが、完全ではありません（そして、jQueryを単純化して使用します）。

$("nav a:hover").hover(function() {
  $(this).parent().css({'color': 'red'});
}), function() {
  $(this).parent().css({'color': 'black'})
});

これにより、読み取る色が変更され、ホバーがフォーカスを失うと黒に戻ります。

score 0 · Accepted Answer

まもなく CSS 4 で導入される予定です。これは、今日私が見た 5 番目または 6 番目の質問です。ブラウザベンダーがすぐに実装する必要があると思います。

score 0 · Accepted Answer

CSS 2 にはこれに対する解決策はありません (CSS 3 については知りません)。

Javascript ソリューションは簡単で、他のメンバーが回答しています。

あなたはLESSを試すことができます。LESS を使用すると、DOM で条件付きのスタイリングを行うことができます。

6 に答える 6