วิธีการจัดรูปแบบองค์ประกอบหลักเมื่อวางเมาส์เหนือองค์ประกอบลูก?

ฉันรู้ว่าไม่มีตัวเลือกพาเรนต์ CSSแต่มันเป็นไปได้หรือไม่ที่จะจัดสไตล์อิลิเมนต์การเลี้ยงดูเมื่อโฮเวอร์องค์ประกอบลูกโดยไม่มีตัวเลือกดังกล่าว?

ในการให้ตัวอย่าง: พิจารณาปุ่มลบที่เมื่อโฮเวอร์จะเน้นองค์ประกอบที่กำลังจะถูกลบ:

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

ด้วย CSS บริสุทธิ์วิธีเปลี่ยนสีพื้นหลังของส่วนนี้เมื่อเมาส์อยู่เหนือปุ่ม

ก่อนหน้านี้คำถามนี้ถูกถามมาหลายครั้งและคำตอบทั่วไปสั้น ๆ ก็คือมันไม่สามารถทำได้โดย CSS บริสุทธิ์ มันอยู่ในชื่อ: สไตล์ชีทแบบเรียงซ้อนรองรับเฉพาะสไตล์ในทิศทางแบบเรียงซ้อนเท่านั้น

แต่ในสถานการณ์ส่วนใหญ่ที่ผลกระทบนี้ต้องการเช่นในตัวอย่างที่กำหนดยังมีความเป็นไปได้ที่จะใช้คุณสมบัติแบบเรียงซ้อนเหล่านี้เพื่อให้ได้ผลตามที่ต้องการ พิจารณามาร์กอัปแบบหลอกนี้:

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

เคล็ดลับคือการให้พี่น้องมีขนาดและตำแหน่งเท่ากันกับผู้ปกครองและกำหนดลักษณะของพี่น้องแทนผู้ปกครอง นี้จะมีลักษณะเหมือนพ่อแม่ที่มีสไตล์!

ตอนนี้วิธีการจัดสไตล์พี่น้อง?

เมื่อเด็กโฮเวอร์ผู้ปกครองก็เช่นกัน แต่พี่น้องไม่ได้เป็นเช่นนั้น เช่นเดียวกันสำหรับพี่น้อง สรุปในสามเส้นทาง CSS ตัวเลือกที่เป็นไปได้สำหรับจัดแต่งทรงผมพี่น้อง

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

เส้นทางที่แตกต่างเหล่านี้ช่วยให้มีความเป็นไปได้ที่ดี ตัวอย่างเช่นปล่อยเคล็ดลับนี้ในตัวอย่างในคำถามผลลัพธ์ในซอนี้ :

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

เห็นได้ชัดว่าในกรณีส่วนใหญ่เคล็ดลับนี้ขึ้นอยู่กับการใช้การกำหนดตำแหน่งแบบสัมบูรณ์เพื่อให้พี่น้องมีขนาดเท่ากันกับผู้ปกครองและยังคงปล่อยให้เด็ก ๆ

บางครั้งมีความจำเป็นต้องใช้พา ธ ตัวเลือกที่ผ่านการรับรองเพื่อเลือกองค์ประกอบเฉพาะดังที่แสดงในซอนี้ซึ่งใช้กลอุบายหลายครั้งในเมนูทรี ค่อนข้างดีจริงๆ

ฉันรู้ว่ามันเป็นคำถามเก่า แต่ฉันก็ทำได้โดยไม่ต้องมีลูกหลอก (แต่เป็น wrapper หลอก)

หากคุณตั้งค่าพาเรนต์เป็นไม่pointer-eventsและจากนั้นเด็กที่divมีการpointer-eventsตั้งค่าจะautoใช้งานได้ :)
โปรดทราบว่า<img>แท็ก (เช่น) จะไม่ใช้กลอุบาย
นอกจากนี้อย่าลืมตั้งค่าpointer-eventsให้autoกับเด็กคนอื่นที่มีฟังเหตุการณ์ของตัวเองมิฉะนั้นพวกเขาจะสูญเสียฟังก์ชันการคลิก

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>

แก้ไข:
ตามที่Shadow Wizard ได้กล่าวไว้โปรดทราบ: มันมีค่าที่จะกล่าวถึงสิ่งนี้จะไม่ทำงานสำหรับ IE10 และด้านล่าง (FF และ Chrome เวอร์ชันเก่าด้วยดูที่นี่ )

อีกวิธีที่ง่ายกว่า (สำหรับคำถามเก่า) ..
คือการวางองค์ประกอบเป็นพี่น้องและใช้:

ตัวเลือกพี่น้องที่อยู่ติดกัน ( +) หรือ ตัวเลือกพี่น้องทั่วไป ( ~)

<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;
}

สาธิตซอนี่

ไม่มีตัวเลือก CSS สำหรับการเลือกพาเรนต์ของชายด์ที่เลือก

คุณสามารถทำได้ด้วย JavaScript

ดังกล่าวก่อนหน้า "ไม่มีตัวเลือก CSS สำหรับการเลือกพาเรนต์ของชายด์ที่เลือก"

ดังนั้นคุณ:

• ใช้ CSS hack ตามที่อธิบายไว้ในคำตอบของ NGLN
• ใช้ javascript - พร้อมกับ jQuery ส่วนใหญ่

นี่คือตัวอย่างสำหรับโซลูชันjavascript / jQuery

ทางด้านจาวาสคริปต์:

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

และในด้าน CSS คุณมีสิ่งนี้:

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

การแก้ปัญหานี้ขึ้นอยู่อย่างเต็มที่ในการออกแบบ แต่ถ้าคุณมี div ผู้ปกครองที่คุณต้องการเปลี่ยนพื้นหลังเมื่อโฉบเด็กคุณสามารถพยายามที่จะเลียนแบบของพ่อแม่ด้วยการ/::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: "";
}

ดูตัวอย่างซอเต็มรูปแบบได้ที่นี่

jquery solution ง่ายๆสำหรับผู้ที่ไม่ต้องการโซลูชัน css บริสุทธิ์:

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

นี่เป็นเรื่องง่ายมากที่จะทำใน Sass! อย่าขุดคุ้ย JavaScript สำหรับสิ่งนี้ & ตัวเลือกใน sass ทำสิ่งนี้ทุกประการ

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