CSS Fokus nicht zu arbeiten, wenn wir Ziel hinzufügen

Gibt es eine Möglichkeit, dies mit CSS zu tun, ich habe ein DOM wie dieseCSS Fokus nicht zu arbeiten, wenn wir Ziel hinzufügen

.nav_bar { 
 
\t background: #c30015; 
 
\t margin-left: 50px; 
 
\t float: left; 
 
} 
 
.nav_bar > ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t display: flex; 
 
\t border-bottom: thin white solid; 
 
\t position:relative; 
 
} 
 
.nav_bar ul li { 
 
\t list-style: none; 
 
} 
 
.nav_bar ul li a { 
 
\t text-decoration: none; 
 
\t color: #ffffff; 
 
\t display: block; 
 
\t border-right: 1px solid #fff; 
 
\t padding: 8px 16px; 
 
} 
 
.nav_bar ul li a:hover { 
 
\t background: #e6b3a1; 
 
\t text-decoration: none; 
 
\t color: #c3000f; 
 
} 
 

 
.nav_bar ul li a:focus , .nav_bar ul li a:active { 
 
\t background: #e6b3a1; 
 
\t text-decoration: none; 
 
\t color: #c3000f; 
 
} 
 

 
.down_nav_bar { 
 
\t background: #e6b3a1; 
 
\t margin-left: 34px; 
 
\t float: left; 
 
\t position:absolute !important; 
 
\t left:0; 
 
\t width:100%; 
 
\t display:none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.down_nav_bar li { 
 
\t list-style: none; 
 
\t display:inline-block; 
 
} 
 
.down_nav_bar li a { 
 
\t text-decoration: none; 
 
\t color: #c3000f; 
 
\t display: block; 
 
\t padding: 8px 23px 8px 18px; 
 
} 
 
.down_nav_bar li a:link { 
 
\t text-decoration: none; 
 
} 
 
.down_nav_bar li a:visited { 
 
\t border-bottom: 2px #c3000f solid; 
 
\t text-decoration: none; 
 
} 
 
.down_nav_bar li a:hover { 
 
\t border-bottom: 2px #c3000f solid; 
 
\t text-decoration: none; 
 
} 
 
.down_nav_bar li a:active { 
 
\t border-bottom: 2px #c3000f solid; 
 
\t text-decoration: none; 
 
} 
 
.down_nav_bar li .active { 
 
\t border-bottom: 2px #c3000f solid; 
 
\t text-decoration: none; 
 
} 
 
:target { 
 
\t display:block; 
 
}

<div class="nav_bar"> 
 
    <ul> 
 
    <li><a href="#">Post sponsor job</a> </li> 
 
    <li><a href="#">Applied KOLs</a> </li> 
 
    <li><a href="#target">Purchase and billing</a> 
 
     <ul id="target" class="down_nav_bar"> 
 
     <li><a href="#" class="active">Purchase Plan</a> </li> 
 
     <li><a href="#">My account</a> </li> 
 
     <li><a href="">Invoice</a> </li> 
 
     <li><a href="">How to pay</a> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Account Settings</a> </li> 
 
    </ul> 
 
</div>

Fokus mit allen Links mit Ausnahme des dritten Link Arbeits Ich weiß nicht, warum das passiert, ich habe hinzugefügt :visited , :active auch, aber nichts wird bearbeitet

Quelle

2016-12-26 Jishnu V S

Was meinen Sie damit der Fokus nicht funktioniert? - Jetzt bin ich in Chrome, und das Ziel funktioniert und ich kann sehen, die Farben ändert sich von jeder Registerkarte drücken Sie – M98

, wenn Sie auf die erste Schaltfläche klicken, können Sie den Hintergrund geändert sehen, zweite auch, aber Sie klicken dritte Schaltfläche, die Hintergrund dosnt geändert –

hoffe, es funktioniert gut, wie Kermani sagte. Welchen Browser benutzen Sie? – Sharmila

Sie können Ihr beabsichtigtes Ergebnis erreichen, indem Sie Ihre id="target" an den Anker, die conta In href="#target" und die folgenden Arten:

#target:target { 
    color: #c3000f; 
    background-color: #e6b3a1; 
} 

#target:target + ul { 
    display:block; 
}

Arbeitsbeispiel:

.nav_bar { 
 
    background: #c30015; 
 
    margin-left: 50px; 
 
    float: left; 
 
} 
 
.nav_bar > ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    border-bottom: thin white solid; 
 
    position:relative; 
 
} 
 
.nav_bar ul li { 
 
    list-style: none; 
 
} 
 
.nav_bar ul li a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    display: block; 
 
    border-right: 1px solid #fff; 
 
    padding: 8px 16px; 
 
} 
 

 
.nav_bar ul li a:hover, 
 
.nav_bar ul li a:focus, 
 
.nav_bar ul li a:active, 
 
#target:target { 
 
    background: #e6b3a1; 
 
    text-decoration: none; 
 
    color: #c3000f; 
 
} 
 

 
.down_nav_bar { 
 
    background: #e6b3a1; 
 
    margin-left: 34px; 
 
    float: left; 
 
    position:absolute !important; 
 
    left:0; 
 
    width:100%; 
 
    display:none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.down_nav_bar li { 
 
    list-style: none; 
 
    display:inline-block; 
 
} 
 
.down_nav_bar li a { 
 
    text-decoration: none; 
 
    color: #c3000f; 
 
    display: block; 
 
    padding: 8px 23px 8px 18px; 
 
} 
 
.down_nav_bar li a:link { 
 
    text-decoration: none; 
 
} 
 
.down_nav_bar li a:visited { 
 
    border-bottom: 2px #c3000f solid; 
 
    text-decoration: none; 
 
} 
 
.down_nav_bar li a:hover { 
 
    border-bottom: 2px #c3000f solid; 
 
    text-decoration: none; 
 
} 
 
.down_nav_bar li a:active { 
 
    border-bottom: 2px #c3000f solid; 
 
    text-decoration: none; 
 
} 
 
.down_nav_bar li .active { 
 
    border-bottom: 2px #c3000f solid; 
 
    text-decoration: none; 
 
} 
 

 
#target:target + ul { 
 
    display:block; 
 
}

<div class="nav_bar"> 
 
    <ul> 
 
    <li><a href="#">Post sponsor job</a> </li> 
 
    <li><a href="#">Applied KOLs</a> </li> 
 
    <li><a id="target" href="#target">Purchase and billing</a> 
 
     <ul class="down_nav_bar"> 
 
     <li><a href="#" class="active">Purchase Plan</a> </li> 
 
     <li><a href="#">My account</a> </li> 
 
     <li><a href="">Invoice</a> </li> 
 
     <li><a href="">How to pay</a> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Account Settings</a> </li> 
 
    </ul> 
 
</div>

Quelle

2016-12-26 11:36:34 Rounin

Das ist, was ich suche, Up vote für Sie sind erstaunlich. lass mich überprüfen, was passiert –

nice one..upvoted :) –

CSS Fokus nicht zu arbeiten, wenn wir Ziel hinzufügen

Antwort

Verwandte Themen