Box nach dem Hover: nach Element

Ich sah ein Problem, wenn ich den Mauszeiger über: nach Element die Box, die angezeigt werden sollte, nicht.Box nach dem Hover: nach Element

HTML-Code:

<div class="top_line_dropdown"> 
     <span class="logged_in_user"> 
      [email protected] (Admin) 

      <div class="top_line_dropdown_content"> 
       aaaa 
      </div> 
     </span> 
    </div>

CSS

.top_line_dropdown { 
    display: inline-block; 
    margin-left: 22px; 
} 
.top_line_dropdown .logged_in_user { 
    font-family: red; 
    font-size: 11px; 
    color: #999; 
} 
.top_line_dropdown .logged_in_user:after { 
    content: "\f078"; 
    font-family: FontAwesome; 
    font-weight: none; 
    font-size: 9px; 
    color: #999; 
    padding-left: 5px; 
} 
.top_line_dropdown .logged_in_user .top_line_dropdown_content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    padding: 12px 16px; 
    z-index: 1; 
    right: 50px; 
} 
.top_line_dropdown .logged_in_user:hover:after .top_line_dropdown_content { 
    display: block; 
}

Wenn ich ändern: schweben statt : Hover: nach die Box unten zeigen nach oben. Konnte nicht herausfinden, wo das Problem sein könnte.

Sie können ein anschauliches Beispiel siehe hier: JSFIDDLE

Quelle

2016-03-22 user2204367

Es ist einfach, weil :hover:after ein Pseudo-Element ist, das von Ihrem CSS erstellt, aber es hat nicht das .top_line_dropdown_content Element als Kind. Wenn Sie :hover tun, überprüfen Sie, ob das Element Hover ist, und wenn dies der Fall ist, wird es den Stil auf seine Kinder anwenden. Ich gebe dir ein Beispiel. Ich werde das ::after Pseudo-Element in diesem Code hinzufügen, um Sie zu verstehen.

<div class="top_line_dropdown"> 
    <span class="logged_in_user"> 
     [email protected] (Admin) 

     <div class="top_line_dropdown_content"> 
      aaaa 
     </div> 
     ::after 
    </span> 
</div>

In dem obigen Beispiel ist das :: after-Element, wo Ihr Element platziert werden würde.

Quelle

2016-03-22 19:46:32

Also, wie es zu beheben? : D Sollte ich top_line_dropdown_content in &: nach sass platzieren? – user2204367

Um es zu beheben, müssen Sie die rechte Auswahl anwenden. Behalten Sie den: hover-Bereich, damit das Feld angezeigt wird, wenn Sie es möchten. Und dann, um Ihr: nach Stil auf das richtige Element anzuwenden. Ich bin nicht sicher, wie es in Ihrer Anwendung aussehen soll, daher ist es schwierig, eine genaue Lösung zu finden. Aber es scheint so, als müssten Sie Ihren Selektor in Ihrem CSS betrachten und das Tutorial auf dem Pseudo-Element: after und: before überprüfen, um sicherzugehen, dass Sie verstehen, wie sie funktionieren. –

Hmm ... Ich verstehe es nicht um ehrlich zu sein. – user2204367

Box nach dem Hover: nach Element

Antwort

Verwandte Themen