ネストされた事業部ホバー質問

Question

私が持っているこのような3 HTMLのdiv：

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"></div> 
</div> 

私はMainDivまたはnestedDiv1に置くと、私はMainDivとnesteddiv2の色2の色1を設定し、希望、そして私はnesteddiv2にホバーnesteddiv2とMainDivの背景色を変更します。

私はCSSでやりたいと思っています。私はJavaScriptの方法を知っています。

おかげマズダク教は

Answer 1

は、その子孫のいずれかを含むセレクタを使用して要素を標的とするために、CSSにおいて、方法はありません。したがって、前半は達成するのが簡単ではないが、後半は不可能である。

JavaScriptがそれほど重要であれば、それを使用してください。それが唯一のタグにホバーサポートしていますので、これはIEで動作しません：あなたはCSS

#MainDiv:hover{ 
    color:red; 
} 

#MainDiv div#nesteddiv1{ 
    color:gray; 
} 

#MainDiv div#nesteddiv1:hover{ 
    color:blue; 
} 

#MainDiv div#nesteddiv2{ 
    color:yellow; 
} 

#MainDiv div#nesteddiv2:hover{ 
    color:green; 
} 

注意を以下で行うことができます与えられたHTMLの場合

Answer 2

。

Answer 3

要素を別の要素から選択する方法はありません。ただ可能ではありません。

しかし、あなたは、このようにjQueryを使ってこれを行うことができます。

$(function() { 
    $("#div1").hover(function() { 
     $("#show-hide").toggleClass('highlight'); 
    }); 
}); 

私はexample for you hereを行いました。

Answer 4

CSSでこれを行う唯一の方法は、ホバーが発生したときに余分なdivを使用してmaindivをカバーすることです。そして、それはIE < V9、上で動作しないでしょう、それはZインデックス

が必要になりますので、これはCSSは非常にトリッキーになり、マークアップ

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"> 
    <div id="extradiv"><div> 
    </div> 
</div> 

だろう。

（免責事項：これはテストされていません - おそらくあなたはより多くのルールが必要になります）=絶対、一定の幅と高さ、およびZインデックス：相対または位置

• MainDivは位置でなければならないであろう-1。
• 入れ子divs 1と2は、相対または絶対、z-インデックス= 1
• とすることができます。余分なdivは、位置、絶対、上：0、左：0、同じwitdthおよびheight隠された、およびZインデックス= 0
• ＃1 nexteddiv2：MainDiv、ディスプレイとして#extradivがディスプレイを持つことになりホバー：しばらくネストされたdivを1ブロック

のz-indexが、他の人の後ろにオールウェイズ滞在maindivになるだろうと2は常に上にとどまります。 extradivはそれらの間にあり、maindivを「カバー」しますが、nesteddiv2がホバリングされたときだけです。

この方法の欠点は、nesteddiv2だけでなく、ホバーリングを停止するまで、extradivが表示されることです。