CSS style for hovering over overlapping elements using CSS

Question

I have a DOM structure containing multiple divs. Visually, some of these Divs are children of others, but in the DOM structure they are all brothers and sisters.

I need to style the hang state of the “parent” divs, even if it hangs over its “child” divs.

Is there a way to do this without Javscript? Perhaps using the current position of the divs to know that they are inside another div?

---

Update

---

The problem is that the parents are actually brothers and sisters. There is only one container, and let 8 children speak. 2 is a large div, and the remaining six are shown 3 inside each larger div. Something like:

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

Only the parent surrounding the soaring children should change color.

I cannot change the structure of the BTW DOM.

Answer 1

I can't think of a clean (or even hacky) way of doing this with CSS only. Here's the Javascript method if you don't see anything else. Just click mousemove on 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 ); }; 

Demo: 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; } 

Script:

 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 2

No, you cannot influence parents or previous siblings with CSS alone. Only the following brothers and sisters who will not help you.

Does anyone need a pseudo class :parent ?

Answer 3

How about surrounding all the elements with one container, and then do something like:

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

Like: http://jsfiddle.net/Wexcode/XazKw/

Answer 4

If the style takes effect when you hover over the place of the DOM brother, you should simply use the selector for the brother:

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

Answer 5

What cannot be done can (often) be faked. While the simplest solution would be to reconfigure the DOM and use the adjacent sibling selector, there is another way: a) more complex b) requires a modern browser.

You can use pseudo-elements to fake the parenting effect. The specified pseudo-element will be visible only when the parent is hovering over it .child in this case :) and is placed absolutely to compensate .childs offset from .parent , spanning .parent , thus looking like a changed state of the parent.

The spell is here .