Thay đổi div phụ huynh thành một nền khác khi di chuột qua các div con riêng lẻ

Question

Tôi thấy các giải pháp để thực hiện điều này khi chỉ xử lý một hiệu ứng di chuột mong muốn, nhưng tôi muốn có bốn div con mà mỗi div thay đổi chính div của nền cho một hình ảnh riêng biệt.

Tôi cho rằng điều này là không thể với CSS.

<div id="buttonBox"> 
    <div id="schedBox"> 
    <a href="#">Schedule</a> 
    </div> 
    <div id="transBox"> 
    <a href="#">Transformation</a> 
    </div> 
    <div id="destBox"> 
    <a href="#">Destination</a> 
    </div> 
    <div id="inspirBox"> 
    <a href="#">Inspiration</a> 
    </div> 
</div> 

Ngoài ra, tôi có thể có các div con nhỏ có nền tảng khác nhau. Lơ lửng một div con sẽ thay đổi tất cả các hình nền div con thành một màu riêng biệt, nhưng tôi không thể tìm ra cách để di chuột trên div thứ hai ảnh hưởng đến div trước đó .. chỉ những anh chị em sau đó.

Answer 1

Đáng buồn là không có bộ chọn gốc nào trong CSS.

Bạn sẽ phải sử dụng javascript để đạt được những gì bạn muốn làm.

Answer 2

Trong khi bộ chọn cha mẹ thực tế không thể thực hiện thông qua CSS, bạn có thể "hack" nó cho trường hợp của bạn bằng cách sử dụng các yếu tố bổ sung và định vị.

Điều bạn cần là thay đổi nền dựa trên yếu tố nào được di chuột - ok! Hãy thêm pseudo-yếu tố (hoặc các yếu tố bình thường nếu bạn sẽ cần IE hỗ trợ) và vị trí của họ trên phụ huynh sử dụng định vị tuyệt đối và tích cực z-index:

#buttonBox { 
    position: relative; 
    z-index: 1; 
} 

#buttonBox > div:before { 
    content: ""; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
} 

Những yếu tố vị trí nên có tiêu cực z-index, vì vậy họ sẽ được đặt dưới tất cả các nội dung khác, nhưng trên nền của phần tử gốc.

Bằng cách này bạn có thể thêm các quy tắc như

#schedBox:hover:before { background: lime; } 
#transBox:hover:before { background: red; } 
#destBox:hover:before { background: orange; } 
#inspirBox:hover:before { background: yellow; } 

Và pseudo-nền tảng của phụ huynh sẽ thay đổi trên di chuột!

Điều duy nhất cần biết là không được có bất kỳ yếu tố nào có vị trí không tĩnh giữa bố mẹ và phần tử có vai trò nền.

Here is the live example at dabblet

Answer 3

Có, có thể. Hãy thử điều này:

#schedBox:hover, #buttonBox{ 
    background: red; 
} 

#schedBox:hover{ 
    background: green; 
}