Style hover state of element when hovering over overlapping elements with CSS

Question

I have a DOM structure containing several divs. Visually, some of these Divs are children of others, but in the DOM Structure they are all siblings.

I need to style the hover state of the "parent" divs even when hovering over its "child" divs.

Is there a way of doing this without Javscript? Maybe by using the current position of the divs to know they are inside of another div?

---

Update

---

The problem is the parents are actually siblings. There's only one container and let's say 8 children divs. 2 are bigger divs and the other six are shown 3 inside each bigger div. Something like:

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

Only the parent surrounding the hovered children should change color.

I can't change the DOM structure BTW.

Answer 1

I can't think of a clean (or even a hacky) way of doing it with just CSS. Here's a Javascript method if you don't figure anything else out. Just trap 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 can't affect parents or previous siblings through CSS alone. Only following siblings, which doesn't help you here.

Anyone else want a :parent pseudo-class?