Wie kann man ein Elternelement mehrere Ebenen über dem Kindelement auswählen, indem man den Selektor 'hover' und ': has()' benutzt?

Ich weiß, dass dies möglicherweise nicht möglich ist, also bin ich auch offen dafür, den Code wegen der Funktionalität zu modifizieren.Wie kann man ein Elternelement mehrere Ebenen über dem Kindelement auswählen, indem man den Selektor 'hover' und ': has()' benutzt?

Hier ist meine CSS und HTML:

* { 
 
    -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>

Ich dachte wirklich, dass ich weg durch die Nutzung der :hover Wähler mit der Auswahl eines übergeordneten Elements bekommen könnte, aber natürlich habe ich mich geirrt. Ich habe bereits "Is there a CSS parent selector?" besucht, sowie die meisten anderen Abfragen, die auf dieses Problem verweisen. Mein spezifisches Bedürfnis verwirrt mich jedoch immer noch.

Im Wesentlichen ist es möglich, die background: von <header> unter Verwendung der in-place -child Anordnung, die :hover Selektor (was ich will stilistisch), und einige Verfahren zu manipulieren, dass die Wähler wieder auf die <header> zu verlängern? Die :has() Methode scheint ein wahrscheinlicher Kandidat zu sein, aber ich kann nicht herausfinden, wie ich sie hier für mein Leben umsetzen soll. Wenn irgendeine Struktur verändert werden kann/muss, während das Ästhetische beibehalten wird, dann bin ich sicherlich bereit, sie auch umzusetzen. Vielen Dank im Voraus!

Quelle

2016-04-04 zzz

So ... Sie wollen den Hintergrund der ''

wenn das, was sich ändern wird schwebte? Die Links in der Navigationstabelle? Ich sehe keine Möglichkeit, dies mit reinem CSS zu tun, da es (wie du erwähnt hast) keinen elterlichen Elementselektor gibt, aber es ist ziemlich einfach mit jQuery zu tun (es sei denn, ich habe es falsch interpretiert) ... https: // jsfiddle.net/ng5hwwdm/ –

Fazit Ich denke, das ist, was OP sucht. benutze einfach '$ (this) .closes ('header'). css ....' damit du nicht den Hintergrund jedes Headers auf der Seite änderst –

@itsgoingdown - guter Ruf - nur angeschaut was auf der Seite war, Wenn Sie jedoch mehrere '' Elemente verwenden (oder sie möglicherweise verwenden könnten), verwenden Sie unbedingt die Funktion' nearest() '. Hier ist die gleiche Geige aktualisiert mit 'engsten()' - https://jsfiddle.net/5d1tvnwh/ –

Ich weiß nicht, wie man reinen CSS verwendet, aber wenn Sie den <header> Hintergrund ändern möchten, basierend auf welchem Link in Ihrer Navigation schwebt, können Sie dies in jQuery verwenden (stellen Sie sicher, dass es läuft oder am Ende Ihres Körpers setzen kurz vor </body>):

$('[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/

Quelle

2016-04-04 22:02:00

Ich wusste, dass mein Tag für die Eingabe von jQuery eines Tages kommen würde, ich habe einfach nicht erwartet, dass es so bald sein wird! Vielen Dank für Ihre Führung. Das war genau das, was gebraucht wurde. – zzz

Wie kann man ein Elternelement mehrere Ebenen über dem Kindelement auswählen, indem man den Selektor 'hover' und ': has()' benutzt?

Antwort

Verwandte Themen