2016-10-17 2 views
-1

Ich arbeite an einer Navigationsleiste Aktive Farbe auf meiner Navigationsleiste funktioniert nicht.Hover funktioniert gut, aber nicht die active.In, wenn aus dem Browser ich wählen, um Element Status und klicken Sie auf aktiv Browser ändert die Farbe beim Klicken auf aktiven Zustand, aber im normalen Zustand funktioniert es nicht.Ich bin stecken geblieben und sehr verwirrt, kann mir bitte jemand helfen? Danke im Voraus.Active funktioniert nicht auf Link in css

.main-nav { 
 
    color: #FFF; 
 
    width: 100%; 
 
    background-color: #5e2d91; 
 
    float: right; 
 
    line-height: 42px; 
 
    margin-top: -3px; 
 
} 
 
.main-nav ul li { 
 
    display: inline; 
 
    padding: 0px 10px; 
 
} 
 
.main-nav ul li a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    padding: 20px 14px; 
 
} 
 
.main-nav ul { 
 
    margin-bottom: 7px !important; 
 
} 
 
.main-nav ul li a:hover { 
 
    background-color: #0098aa; 
 
} 
 
.main-nav ul li a:active { 
 
    background-color: #0098aa; 
 
}
<nav class="main-nav"> 
 
    <ul> 
 
    <li><a href="one.php"> Home </a> 
 
    </li> 
 
    <li><a href="transaction.php"> Trade Now</a> 
 
    </li> 
 
    <li><a href="view.php"> Transactions </a> 
 
    </li> 
 
    <li><a href="chart.php"> Performance </a> 
 
    </li> 
 
    <li><a href="complete.php">History </a> 
 
    </li> 
 
    <li class="time">US Markets Open in&nbsp;<span id="hm_timer" class="style colorDefinition size_sm">08:05:35</span>&nbsp;hours</li> 
 
    </ul> 
 
</nav>

+0

Haben Sie das Problem einmal durch das inspect-Element des Browsers verifiziert? Es ist durchaus möglich, dass Sie CSS-Regeln von anderen CSS überschrieben werden. – Arvind

+0

Yaa könnte sein, weil wenn ich deinen Code lief es perfekt funktioniert. Möglicherweise werden Ihre Stile von etwas anderem überschrieben – Geeky

+0

Ihren Code hier https://jsfiddle.net/ –

Antwort

0

Code funktioniert gut auf fiddle wird vielleicht einige andere CSS-Code

versuchen, diese

body .main-nav ul li a:active{ 
    background-color:#0098aa; 
} 

Wenn es nicht funktioniert versuchen Sie, wichtig/überschreiben werden/nicht empfohlen

body .main-nav ul li a:active{ 
    background-color:#0098aa!important; 
} 

Ich empfehle Sie Element auf diesem Link zu inspizieren und aktiven Zustand zu überprüfen, könnte es einige andere CSS seinen ur-Code zu überschreiben

+0

ich versuche, aber nicht funktioniert können Sie bitte dort überprüfen? – Nadeem

+0

http://marketinthepocket.com/ – Nadeem

+0

@Nadeem ... Ich guees Sie haben die gleichen Farben für Hover und aktiv, so das ist, warum Sie keinen Unterschied machen können – Geeky

0

In Ihrem Code, die Hintergrund-Farbe für :active ist das gleiche wie schweben, so dass es funktioniert, aber Du kannst es nicht sehen. Ändern Sie es in eine andere Farbe und es würde funktionieren.

Im Falle Ihrer Website, sehe ich keinen CSS-Selektor als: aktiv. Bist du sicher, dass du es dort geschrieben hast?

0

In Ihrer Website marketinthepocket.com haben Sie die Hintergrundfarbe weiß angegeben. Ändern für die Farbe wird funktionieren.

body .main-nav ul li a:active { 
    background-color: red; 
}