Bagaimana cara menata elemen induk saat mengarahkan elemen anak?

Saya tahu bahwa tidak ada pemilih induk CSS , tetapi apakah mungkin untuk menata elemen pengasuhan saat melayang elemen anak tanpa pemilih seperti itu?

Untuk memberikan contoh: pertimbangkan tombol hapus yang ketika diarahkan akan menyorot elemen yang akan dihapus:

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

Dengan menggunakan CSS murni, bagaimana cara mengubah warna latar belakang bagian ini ketika mouse di atas tombol?

Nah, pertanyaan ini ditanyakan berkali-kali sebelumnya, dan jawaban singkatnya adalah: Tidak dapat dilakukan dengan CSS murni. Ada dalam namanya: Cascading Style Sheets hanya mendukung gaya dalam arah cascading, bukan ke atas.

Tetapi dalam kebanyakan situasi di mana efek ini diinginkan, seperti dalam contoh yang diberikan, masih ada kemungkinan untuk menggunakan karakteristik kaskade ini untuk mencapai efek yang diinginkan. Pertimbangkan markup pseudo ini:

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

Triknya adalah memberi saudara kandung ukuran dan posisi yang sama seperti orang tua dan untuk gaya saudara kandung bukan orang tua. Ini akan terlihat seperti orang tua ditata!

Sekarang, bagaimana gaya saudara kandungnya?

Ketika anak itu melayang, orang tuanya juga, tetapi saudara kandungnya tidak. Hal yang sama berlaku untuk saudara kandung. Ini menyimpulkan dalam tiga jalur pemilih CSS yang mungkin untuk menata saudara:

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

Jalur yang berbeda ini memungkinkan beberapa kemungkinan bagus. Misalnya, melepaskan trik ini pada contoh dalam hasil pertanyaan dalam biola ini :

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

Jelas, dalam banyak kasus, trik ini tergantung pada penggunaan posisi absolut untuk memberi saudara kandung ukuran yang sama seperti orang tua, dan masih membiarkan anak muncul di dalam orang tua.

Kadang-kadang perlu untuk menggunakan jalur pemilih yang lebih berkualitas untuk memilih elemen tertentu, seperti yang ditunjukkan dalam biola ini yang mengimplementasikan trik beberapa kali dalam menu pohon. Cukup bagus kok.

Saya tahu ini adalah pertanyaan lama, tapi saya berhasil melakukannya tanpa anak semu (tapi pembungkus semu).

Jika Anda mengatur orang tua menjadi tanpa pointer-events, dan kemudian anak divdengan pointer-eventsset ke auto, itu berfungsi :)
Perhatikan bahwa <img>tag (misalnya) tidak melakukan trik.
Juga ingat untuk mengatur pointer-eventsuntuk autoanak-anak lain yang memiliki pendengar acara mereka sendiri, atau jika tidak mereka akan kehilangan fungsi klik mereka.

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>

Sunting:
Seperti yang dikatakan oleh Shadow Wizard : perlu disebutkan ini tidak akan bekerja untuk IE10 dan di bawah ini. (FF dan Chrome versi lama juga, lihat di sini )

Pendekatan lain yang lebih sederhana (untuk pertanyaan lama) ..
adalah menempatkan elemen sebagai saudara kandung dan menggunakan:

Selektor Adjacent Adjacent ( +) atau Seluler Adven Sibling ( ~)

<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 di sini .

tidak ada pemilih CSS untuk memilih induk dari anak yang dipilih.

Anda bisa melakukannya dengan JavaScript

Seperti disebutkan sebelumnya "tidak ada pemilih CSS untuk memilih orang tua dari anak yang dipilih".

Jadi kamu juga:

• gunakan hack CSS seperti yang dijelaskan dalam jawaban NGLN
• gunakan javascript - bersama dengan jQuery kemungkinan besar

Berikut adalah contoh untuk javascript / jQuery solusi

Di sisi javascript:

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

Dan di sisi CSS, Anda akan memiliki sesuatu seperti ini:

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

Solusi ini sepenuhnya tergantung pada desain, tetapi jika Anda memiliki div induk yang Anda ingin mengubah latar belakang ketika melayang-layang anak Anda dapat mencoba untuk meniru orangtua dengan ::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: "";
}

Lihat contoh biola lengkap di sini

Solusi jquery sederhana bagi mereka yang tidak membutuhkan solusi css murni:

    $(".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>

Ini sangat mudah dilakukan di Sass! Jangan mempelajari JavaScript untuk ini. Pemilih & di sass melakukan hal ini.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand