Aşağıdakileri belirlediğimde bir sorunla karşılaştım: sonra elemanın göstermesi gereken kutu değil.Vurgulu olduktan sonra kutu: elemandan sonra
HTML KODU:
<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;
}
Ben değiştirin: yerine hover: hover: up gösterisinin altındaki kutu sonra. Sorunun nerede olabileceğini anlayamadım. :hover:after
CSS'nizde tarafından oluşturulan bir sahte unsurudur ama bir çocuk olarak .top_line_dropdown_content
öğesi içermeyen çünkü basitçe JSFIDDLE
Peki nasıl düzeltebilirim? : D top_line_dropdown_content öğesini sass sonra &: içine yerleştirmeliyim? – user2204367
Düzeltmek için, doğru seçiciyi uygulamanız gerekiyor. Kutuyu, istediğiniz zaman görünmesini sağlamak için hover bölümünü saklayın. Ve sonra, uygulamak için: stil sonra doğru öğeye. Uygulamanızda neye benzeyeceğinden emin değilim, bu yüzden kesin bir çözüm vermek zor. Ancak, seçicinize CSS'nizde bakmanız ve öğreticiyi aşağıdakiler üzerinde kontrol etmeniz gerektiği anlaşılıyor: nasıl ve sonra: nasıl çalıştığını anladığınızdan emin olmak için sözde öğeden önce. –
Hmm ... Dürüst olmamalıyım. – user2204367