«Home

What Is Wrong My Active Link Code?

Please, am trying out my little knowledge on css. Please, how do I make the active links to remain the same color with the hover? I don't seem to get it here. Am almost giving up on this but am eager to learn more. Please help.

.mattblacktabs{

width: 100%;

overflow: hidden;

border-bottom: 2px solid black; /*bottom horizontal line that runs beneath tabs*/

}

.mattblacktabs ul{

margin: 0;

padding: 0;

padding-left: 0px; /*offset of tabs relative to browser left edge*/

font: bold 10px Verdana, Arial, Helvetica, sans-serif;

list-style-type: none;

}

.mattblacktabs li{

display: inline;

margin: 0;

}

.mattblacktabs li a{

float: left;

display: block;

text-decoration: none;

margin: 0;

padding: 5px 15px; /*padding inside each tab*/

border-right: 1px solid white; /*right divider between tabs*/

color: #000040;

background: #ccc; /*background of tabs (default state)*/

}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{

color: #fff;

background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */

}

Avatar
Newbie
3 answers

Ok, in your html, have you set the desired <li> to be of the class .selected?

lets start from there first.

0
Avatar
Newbie

Thanks dual core but am actually talking about making keeping the selected link highlighted as an active page. The hover effect is ok but now, if someone clicks on the page how do they know they are actually on the page since the button (link) isn't highlighted?

0
Avatar
Newbie

Look at this

.mattblacktabs li a:hover, .mattblacktabs li.selected a{

color: #fff;

background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */

}

remove "color: #fff;" to remove the hover color

If you want to remove the whole hover behavior, remove the whole of this

.mattblacktabs li a:hover, .mattblacktabs li.selected a{

color: #fff;

background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */

}

hope this works

0
Avatar
Newbie
Your answer
Add image

By posting your answer, you agree to the privacy policy and terms of service.