Trạng thái di chuột của phần tử khi di chuột qua các phần tử chồng chéo với CSS

Question

Tôi có cấu trúc DOM chứa một số div. Một cách trực quan, một số Divs này là con của những người khác, nhưng trong cấu trúc DOM chúng đều là anh chị em ruột.

Tôi cần tạo kiểu trạng thái di chuột của div "cha mẹ" ngay cả khi di chuột qua các div "con" của nó.

Có cách nào để thực hiện điều này mà không có Javscript không? Có lẽ bằng cách sử dụng vị trí hiện tại của các div để biết họ đang ở trong div khác?

---

Cập nhật

---

Vấn đề là các bậc phụ huynh thực sự anh chị em. Chỉ có một thùng chứa và giả sử 8 con divs. 2 là div lớn hơn và sáu khác được hiển thị 3 bên trong mỗi div lớn hơn. Một cái gì đó như:

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

Chỉ phụ huynh xung quanh trẻ em dao động nên thay đổi màu sắc.

Tôi không thể thay đổi cấu trúc DOM BTW.

Answer 1

Làm thế nào về xung quanh tất cả các yếu tố với một container duy nhất, và sau đó làm một cái gì đó như:

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

Giống như: http://jsfiddle.net/Wexcode/XazKw/

Answer 2

Nếu phong cách có hiệu lực khi di chuột của một anh chị em DOM, bạn nên chỉ có thể sử dụng công cụ chọn anh chị em:

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

Answer 3

Tôi không thể nghĩ ra cách làm sạch (hoặc thậm chí là hacky) bằng CSS. Đây là một phương pháp Javascript nếu bạn không tìm ra bất cứ thứ gì khác. Chỉ cần bẫy mousemove trên 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 4

Không, bạn không thể ảnh hưởng đến cha mẹ hoặc anh chị em trước đây thông qua CSS một mình. Chỉ theo anh chị em, điều này không giúp bạn ở đây.

Bất kỳ ai khác muốn có một lớp học giả :parent?

Answer 5

Điều không thể thực hiện (thường) được giả mạo. Trong khi giải pháp đơn giản nhất sẽ là sắp xếp lại DOM và sử dụng bộ chọn anh chị em liền kề có cách khác, đó là a) phức tạp hơn b) yêu cầu trình duyệt hiện đại.

Bạn có thể sử dụng các phần tử giả để tạo hiệu ứng di chuột giả trên gốc.Phần tử giả cho biết sẽ chỉ hiển thị khi di chuột qua bố cục - .child trong trường hợp này :) và được đặt hoàn toàn để bù đắp .childs bù trừ từ .parent bao gồm .parent do đó trông giống như trạng thái gốc đã thay đổi.

Fiddle here.