Bir alt öğeyi, imleç 'seçiciyi ve': has() 'işlevini kullanarak alt öğenin üzerinde birkaç seviye nasıl seçebilirsiniz?

Question

Bunun mümkün olmayabileceğinin farkındayım, bu yüzden de işlevsellik uğruna kodu değiştirmeye de açığım. Gerçekten Açıkçası yanılmışım, ben uzakta :hover seçici kullanarak bir üst elemanı seçerek ile alabilir, ama

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-family: 'Raleway Webfont'; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 4000px; 
 
    font-size: 16px; 
 
    line-height: 1.5; 
 
} 
 

 
ul, li, h1, h2, p, a, .logo { 
 
    font-family: 'Raleway Webfont'; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: black; 
 
    font-weight: 200; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    width: 100%; 
 
    padding-top: 0px; 
 
    background: #e5e5e5; 
 
    transition:.25s; 
 
    z-index: 100; 
 
    border-bottom-style: solid; 
 
    border-width: 1px; 
 
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.9); 
 
} 
 

 
.inner { 
 
    width: 800px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    overflow: hidden; 
 
} 
 

 
nav ul { 
 
    float: right; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    float: left; 
 
    list-style: none; 
 
} 
 

 
nav a { 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 25px 15px; 
 
    transition:.25s; 
 
} 
 

 
nav a:hover { 
 
     margin: -8px 0 0 0; 
 
} 
 

 
nav ul li:first-child a { 
 
    background:#b7b7b7 !important; 
 
} 
 
nav ul li:nth-child(2) a { 
 
    background:#a0a0a0 !important; 
 
} 
 
nav ul li:nth-child(3) a { 
 
    background:#898989 !important; 
 
} 
 
nav ul li:nth-child(4) a { 
 
    background:#727272 !important; 
 
} 
 
nav ul li:nth-child(5) a { 
 
    background:#5b5b5b !important; 
 
} 
 

 
nav ul li:first-child:hover header { 
 
    background: #b7b7b7; 
 
} 
 
nav ul li:nth-child(2):hover header { 
 
    background: #a0a0a0; 
 
} 
 
nav ul li:nth-child(3):hover header { 
 
    background: #898989; 
 
} 
 
nav ul li:nth-child(4):hover header { 
 
    background: #727272; 
 
} 
 
nav ul li:nth-child(5):hover header { 
 
    background: #5b5b5b; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    color: #000; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    line-height: 70px; 
 
} 
 

 
section .inner { 
 
    padding-top: 125px; 
 
} 
 

 
p { 
 
    padding-top: 25px; 
 
    font-weight: 400; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<header> 
 
    <div class="inner"> 
 
    <div> 
 
     <a class="logo" href="Home.html">W </a> 
 
    </div> 
 
    <nav role='navigation'> 
 
     <ul> 
 
     <li><a href="me.html">ME</a></li> 
 
     <li><a href="cv.html">CV</a></li> 
 
     <li><a href="rd.html">RD</a></li> 
 
     <li><a href="av.html">AV</a></li> 
 
     <li><a href="rr.html">RR</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<section> 
 
    <div class="inner"> 
 
    <h1>about me</h1> 
 
    <p><span> A work in progress.</span> 
 
    </p> 
 
    </div> 
 
</section>

:

İşte benim css ve html olduğunu. Bu soruna işaret eden diğer sorguların çoğunun yanı sıra "Is there a CSS parent selector?"'u da ziyaret ettim. Ancak benim özel ihtiyacım hala beni şaşırtıyor.

Esasen, :hover seçici (ı üslup istediğini) ve <header> kadar geri o seçiciyi uzatmak için bazı yöntem yerinde -child düzenlemesini kullanan <header> ait background: manipüle etmek mümkün mü? :has() yöntemi olası bir aday gibi gözüküyor, ama benim için hayatın nasıl uygulanacağını anlayamıyorum. Herhangi bir yapı estetiği korurken değiştirilebiliyorsa/değiştirilmeli ise, kesinlikle onu uygulamaya da açıkım. Şimdiden teşekkür ederim!

Answer 1

Saf CSS'yi kullanmanın bir yolunu bilmiyorum, ancak navigasyonunuzda hangi bağlantıya bağlı olarak <header> arka planını değiştirmek isterseniz, bunu jQuery'de kullanabilirsiniz (yükte çalıştığınızdan emin olun, veya sadece) </body> önce gövdenin ucunda yerleştirin:

$('[role=navigation] a').hover(function(){ 
    $(this).closest('header').css('background-color', $(this).css('background-color')); 
},function(){ 
    $(this).closest('header').css('background-color', '#e5e5e5'); 
}); 

https://jsfiddle.net/5d1tvnwh/