: nach und: Hover-Ausgabe, wirken sich nicht auf ganze Element

Question

Ich habe diesen Code: https://codepen.io/anon/pen/QdQEQW

Wie Sie sehen können, wenn Sie den Mauszeiger über „Dropdown“ es ändert sich auch die Hintergrundfarbe von „V“, die: nach dem Teil. Ich möchte das nicht. Einfach. Aber ich kann es einfach nicht schaffen. Ich habe gegoogelt und versucht und versucht, aber ich kann einfach nicht herausfinden, wie.

Ich habe eine Reihe von verschiedenen Variationen ausprobiert, zB

.onclick-menu:hover.onclick-menu:after { 
background: blue; 
} 

.onclick-menu:after:hover { 
background: blue; 
} 

.onclick-menu:hover > onclick-menu:after:hover { 
background: blue; 
} 

.onclick-menu:hover + onclick-menu:hover:after { 
background: blue; 
} 

Answer 1

Es scheint mir, dass Sie das folgende wollen:

#top { 
 
    background: black; 
 
    line-height: 39px; 
 
} 
 
#top nav a { 
 
    color: #21262F; 
 
    padding: 10px 15px; 
 
    background: green; 
 
} 
 
#top nav a:hover { 
 
    background: red; 
 
} 
 
.onclick-menu { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.onclick-menu:after { 
 
    content: "V"; 
 
    background: green; 
 
    margin-left: -4px; 
 
    padding: 8px 10px; 
 
} 
 
.onclick-menu:hover:after { 
 
    background: green; 
 
} 
 
.onclick-menu:focus { 
 
    outline: none; 
 
    pointer-events: none; 
 
} 
 
.onclick-menu:focus .onclick-menu-content { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    pointer-events: auto; 
 
} 
 
.onclick-menu-content { 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: #F4F4F4; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    transition: visibility 0.5s; 
 
}

<div id="top"> 
 

 
    <nav> 
 
    <a href="#">Hey</a> 
 

 
    <div tabindex="0" class="onclick-menu"> 
 
     <a href="#">Dropdown</a> 
 
     <ul class="onclick-menu-content"> 
 
     <li>Look, mom</li> 
 
     <li>no JavaScript!/li> 
 
      <li>Pretty nice, right?</li> 
 
     </ul> 
 
    </div> 
 

 

 
    <a href="#">Support</a> 
 
    </nav> 
 

 
</div>

Aus Gründen der Klarheit willen, Dies ist der eine:

.onclick-menu:hover:after { 
    background: green; 
} 

Ich verstehe nicht, warum Sie .onclick-menu zweimal in diesem Selektor an erster Stelle hinzugefügt. Es ist das Pseudoelement desselben Elements, sodass Sie das übergeordnete Element nicht wiederholen müssen.