Bir alt öğeyi gezdirirken üst öğeye nasıl stil uygulanır?

Bir CSS üst seçici bulunmadığını biliyorum , ancak böyle bir seçici olmadan bir alt öğeyi gezdirirken bir ebeveynlik öğesinin stilini ayarlamak mümkün mü?

Örnek vermek için: üzerine geldiğinde silinmek üzere olan öğeyi vurgulayacak bir silme düğmesini düşünün :

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

Saf CSS ile, fare düğmenin üzerindeyken bu bölümün arka plan rengini nasıl değiştirebilirim?

Bu soru daha önce birçok kez sorulur ve kısa tipik cevap şudur: Saf CSS ile yapılamaz. Adında : Basamaklı Stil Sayfaları , yukarı değil, yalnızca basamaklı yönde stili destekler.

Ancak bu etkinin istendiği çoğu durumda, verilen örnekte olduğu gibi, istenen etkiye ulaşmak için bu basamaklı özellikleri kullanma olasılığı hala vardır. Şu sözde işaretlemeyi düşünün:

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

Hile, kardeşe ebeveynle aynı boyutta ve pozisyon vermek ve ebeveyn yerine kardeşe stil vermektir. Bu ebeveynin tarzı gibi görünecek!

Şimdi, kardeşi nasıl şekillendirirsiniz?

Çocuk üzerine geldiğinde, ebeveyn de öyle, ama kardeş değil. Aynı şey kardeş için de geçerli. Bu, kardeşi şekillendirmek için üç olası CSS seçici yolunda sona erer:

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

Bu farklı yollar bazı güzel olasılıklara izin verir. Örneğin, sorudaki örnek üzerinde bu hileyi açığa çıkarmak, bu kemanla sonuçlanır :

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

Açıkçası, çoğu durumda bu hile, kardeşe ebeveynle aynı boyutta vermek için mutlak konumlandırma kullanımına bağlıdır ve yine de çocuğun ebeveyn içinde görünmesine izin verir.

Bazen , bir ağaç menüsünde hile defalarca uygulayan bu kemanda gösterildiği gibi, belirli bir elemanı seçmek için daha nitelikli bir seçici yol kullanmak gerekir . Gerçekten çok güzel.

Ben eski bir soru olduğunu biliyorum, ama ben sadece sahte bir çocuk (ama bir yalancı sarıcı) olmadan bunu başardı.

Hiçbir birlikte olmak ebeveyn ayarlarsanız pointer-eventsve sonra bir çocuk divile pointer-eventssetine auto, çalışıyor :)
o Not <img>(örneğin) etiket hile yapmaz.
Ayrıca ayarlamayı unutmayın pointer-eventsiçin autokendi olay dinleyicisi var veya başka bir şekilde onların tıklama işlevselliğini kaybeder diğer çocuklar için.

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>

Düzenleme:
As Gölge Sihirbazı lütfen dikkat çekti: Aşağıda IE10 ve bu olmaz işi söz değer. (Eski FF ve Chrome sürümleri de buraya bakın )

Başka bir, daha basit bir yaklaşım (eski bir soruya) ..
öğeleri kardeş olarak yerleştirmek ve kullanmak olacaktır:

Bitişik Kardeş Seçici ( +) veya Genel Kardeş Seçici ( ~)

<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 Keman burada .

seçilen bir alt öğenin üst öğesini seçmek için hiçbir CSS seçici yoktur.

JavaScript ile yapabilirsin

Daha önce de belirtildiği gibi "seçilen bir çocuğun üst öğesini seçmek için CSS seçici yok".

Yani siz de:

• NGLN'nin cevabında açıklandığı gibi bir CSS kesmek kullanın
• Javascript kullanın - büyük olasılıkla jQuery ile birlikte

Javascript / jQuery çözümü için örnek

Javascript tarafında:

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

Ve CSS tarafında, şöyle bir şey olurdu:

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

Bu çözüm tamamen tasarıma bağlıdır, ancak bir çocuğu tutarken arka planını değiştirmek istediğiniz bir üst div öğeniz varsa, üst öğeyi ::after/ ile taklit etmeye çalışabilirsiniz ::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: "";
}

Burada tam bir keman örneğine bakın

Saf bir css çözümüne ihtiyaç duymayanlar için basit bir jquery çözümü:

    $(".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'ta bunu yapmak son derece kolaydır! Bunun için JavaScript'i araştırmayın. Sass'taki & seçici tam olarak bunu yapar.

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