CSSを使用してオーバーラップする要素の上をホバーするときの要素のスタイルホバーの状態

Question

私はいくつかのdivを含むDOM構造を持っています。視覚的に、これらのDivのいくつかは他人の子供ですが、DOM構造ではすべて兄弟です。

「親」divのホバー状態を、その「子」divにカーソルを置いてもスタイルを設定する必要があります。

Javscriptなしでこれを行う方法はありますか？たぶんdivの現在の位置を使って、別のdivの中にいることを知ることができますか？

---

更新

---

問題は親が実際に兄弟です。コンテナは1つしかなく、8つの子divとしましょう。 2はより大きなdivで、残りの6つはそれぞれのより大きなdivの内側に3つ表示されます。ような何か：

http://jsfiddle.net/XazKw/12/

色を変更する必要がありホバー子どもを取り巻く親のみ。

私はDOM構造BTWを変更できません。単一の容器を持つすべての要素を囲む、その後のようなものをやっについて

どう

Answer 1

：

#container:hover .parent { /* Hover styles applied */ } 

同様：http://jsfiddle.net/Wexcode/XazKw/

Answer 2

スタイリングは、DOMの兄弟のホバー時に効果を取る場合、あなただけのはず兄弟セレクタを使用することができる：

.parent:hover ~ .child { /* styling */ } 

Answer 3

私はCSSでそれをやってのクリーン（あるいはハック）方法を考えることはできません。あなたが何か他のことを理解していない場合、ここにはJavaScriptのメソッドがあります。ちょうどをbodyにトラップしてください。

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

デモ：http://jsfiddle.net/ThinkingStiff/UhE2C/

HTML：

<div id="parent"></div> 
<div id="overlap"></div> 

CSS：

#parent { 
    border: 1px solid red; 
    height: 100px; 
    left: 50px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

#overlap { 
    background-color: blue; 
    border: 1px solid blue; 
    height: 100px; 
    left: 115px; 
    position: absolute; 
    top: 130px; 
    width: 100px; 
    z-index: 1; 
} 

スクリプト：

document.body.addEventListener('mousemove', function (event) { 

    if(isOver(document.getElementById('parent'), event)) { 
     document.getElementById('parent').innerHTML = 'is over!';   
    } else { 
     document.getElementById('parent').innerHTML = ''; 
    }; 

}, false);   

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Answer 4

いいえ、CSSだけで親や兄弟に影響を与えることはできません。兄弟姉妹の次の兄弟だけがあなたを助けません。

誰でも:parent疑似クラスが必要ですか？

Answer 5

できないことは（しばしば）偽造することができます。最も単純な解決策は、DOMを再配置し、隣接する兄弟セレクタを使用することですが、別の方法があります。つまり、a）より複雑です。b）最新のブラウザが必要です。

擬似要素を使用すると、親に対してホバー効果を偽ることができます。それは親のホバリングするとき擬似要素のみ可視であろうと述べ - この場合.child :)と.childs親変更状態のように見えるこのよう.parentを覆う.parentからのオフセットを補償するために絶対位置。

Fiddle here。