CSS Help: Assigning different text color to .current-menu-item a:hover

  • Resolved Shaun Scovil

    (@sscovil)


    13 years, 6 months ago

    Okay, so here’s the problem…

    On my WordPress site, in the main navigation menu, I use CSS to style the buttons differently for each of three states…

    1. Current page
    2. Not current page
    3. Not current page w/ cursor hover

    …but I would like to add a fourth state…

    4. Current page w/ cursor hover

    …to prevent the text from “disappearing” (i.e. changing color) when the user mouses over the Current Page link.

    I’ve tried to do this by using .current-menu-item a:hover to no avail.

    Here is a link to my website: http://simplestartupkit.com/

    And here is my current CSS code for all things nav menu related:

    #navigation {
    float: right;
    height: 26px;
    overflow: hidden;
    list-style: none;
    margin: 0px;
    padding: 0px;
    border-bottom: 15px solid #FFF;
}
#navigation ul {
    display: none;
}
#navigation li {
    float: left;
    height: 25px;
}
#navigation a {
    background-color: #FFF;
    background-image: url("images/nav_link.png");
    display: block;
    height: 25px;
    border-left: 1px solid #709BAC;
    border-top: 2px solid #709BAC;
    border-right: 1px solid #709BAC;
    margin: 3px 0 0 0px;
    padding: 2px 10px 0 10px;
    font-family: arial;
    font-size: 13px;
    color: #1F6684;
    text-decoration: none;
    font-weight: bold;
}
#navigation a:hover {
    background-image: url("images/nav_link_hover.png");
    color: #FFF;
    border-color: #29708E;
}
#navigation .current-menu-item a,
#navigation .current-menu-item a:hover {
    background-image: none;
    background-color: #FFF
    color: #1F6684;
}
#navigation a span {
    display: block;
}
#navigation a.active {
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
    color: #666;
}

    Any help will be greatly appreciated and rewarded with massive amounts of good karma. Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    13 years, 6 months ago

    you could modify the existing style:

    #navigation .current-menu-item a,
#navigation .current-menu-item a:hover {
	background-image: none;
	background-color: #FFF
	color: #1F6684;
}

    first, add a semicolon after #FFF; and maybe split the style into two – one for the link and one for :hover

    for instance:

    #navigation .current-menu-item a {
	background-image: none;
	background-color: #FFF;
	color: #1F6684;
}

#navigation .current-menu-item a:hover {
	color: #1F6684;
}
    Thread Starter Shaun Scovil

    (@sscovil)

    13 years, 6 months ago

    You rock! It worked, thank you so much. Not sure _why_ it worked, but it worked. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Help: Assigning different text color to .current-menu-item a:hover’ is closed to new replies.