Làm thế nào để tạo kiểu cho phần tử cha khi di chuột một phần tử con?

Tôi biết rằng không tồn tại bộ chọn cha mẹ CSS , nhưng có thể định kiểu phần tử cha mẹ khi di chuột phần tử con mà không có bộ chọn như vậy không?

Để đưa ra một ví dụ: xem xét một nút xóa mà khi được di chuột sẽ làm nổi bật phần tử sắp bị xóa:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Bằng CSS thuần túy, làm thế nào để thay đổi màu nền của phần này khi chuột ở trên nút?

Vâng, câu hỏi này được hỏi nhiều lần trước đây và câu trả lời điển hình ngắn gọn là: Nó không thể được thực hiện bằng CSS thuần túy. Có tên: Cascading Style Sheets chỉ hỗ trợ tạo kiểu theo hướng xếp tầng, không lên.

Nhưng trong hầu hết các trường hợp mà hiệu ứng này được mong muốn, như trong ví dụ đã cho, vẫn có khả năng sử dụng các đặc điểm xếp tầng này để đạt được hiệu ứng mong muốn. Hãy xem xét đánh dấu giả này:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

Bí quyết là cung cấp cho anh chị em có cùng kích thước và vị trí với cha mẹ và tạo kiểu cho anh chị em thay vì cha mẹ. Điều này sẽ trông giống như cha mẹ được tạo kiểu!

Bây giờ, làm thế nào để tạo kiểu cho anh chị em?

Khi con được lơ lửng, bố mẹ cũng vậy, nhưng anh chị em thì không. Các anh chị cũng vậy. Điều này kết luận trong ba đường dẫn chọn CSS có thể để tạo kiểu cho anh chị em:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

Những con đường khác nhau cho phép một số khả năng tốt đẹp. Chẳng hạn, việc giải phóng thủ thuật này trên ví dụ trong câu hỏi dẫn đến câu đố này :

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

Rõ ràng, trong hầu hết các trường hợp, thủ thuật này phụ thuộc vào việc sử dụng định vị tuyệt đối để tạo cho anh chị em có cùng kích thước với cha mẹ, và vẫn để con xuất hiện bên trong bố mẹ.

Đôi khi, cần phải sử dụng một đường dẫn chọn có trình độ cao hơn để chọn một yếu tố cụ thể, như thể hiện trong câu đố này thực hiện thủ thuật nhiều lần trong menu cây. Khá đẹp thực sự.

Tôi biết đó là một câu hỏi cũ, nhưng tôi chỉ xoay sở để làm điều đó mà không có một đứa trẻ giả (nhưng một bọc giả).

Nếu bạn đặt phụ huynh là không có pointer-events, và sau đó một đứa trẻ divvới pointer-eventscác thiết lập để auto, nó hoạt động :)
Lưu ý rằng <img>thẻ (ví dụ) không làm các trick.
Cũng nên nhớ để thiết lập pointer-eventsđể autocho những đứa trẻ khác mà có lắng nghe sự kiện riêng của họ, hoặc nếu không họ sẽ mất chức năng kích của họ.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Chỉnh sửa:
Như Shadow Wizard vui lòng lưu ý: đáng để đề cập đến việc này sẽ không hoạt động cho IE10 trở xuống. (Phiên bản cũ của FF và Chrome cũng vậy, xem tại đây )

Một cách tiếp cận khác, đơn giản hơn (đối với một câu hỏi cũ) ..
sẽ là đặt các yếu tố như anh chị em và sử dụng:

Bộ chọn anh chị em liền kề ( +) hoặc Bộ chọn anh chị em chung ( ~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

Demo Fiddle tại đây .

không có bộ chọn CSS để chọn cha mẹ của một đứa trẻ được chọn.

bạn có thể làm điều đó với JavaScript

Như đã đề cập trước đây "không có bộ chọn CSS để chọn cha mẹ của một đứa trẻ được chọn".

Bạn cũng vậy:

• sử dụng hack CSS như được mô tả trong câu trả lời của NGLN
• sử dụng javascript - cùng với jQuery rất có thể

Dưới đây là ví dụ cho giải pháp javascript / jQuery

Về phía javascript:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

Và về phía CSS, bạn sẽ có một cái gì đó như thế này:

.is-hover {
  background-color: red;
}

Giải pháp này phụ thuộc hoàn toàn vào thiết kế, nhưng nếu bạn có div cha mà bạn muốn thay đổi nền khi di chuột con, bạn có thể thử bắt chước cha mẹ bằng a ::after/ ::before.

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

Xem một ví dụ đầy đủ ở đây

Một giải pháp jquery đơn giản cho những người không cần một giải pháp css thuần túy:

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

Điều này cực kỳ dễ làm trong Sass! Đừng đi sâu vào JavaScript cho việc này. Bộ chọn & trong sass thực hiện chính xác điều này.

http://thesassway.com/interantly/references-parent-selector-USE-ampersand