/    Sign up×
Community /Pin to ProfileBookmark

Changing background colors of individual list items on hover

Copy linkTweet thisAlerts:
Jul 29.2014

Hi, I have a navigation menu comprised of list items – I want two of them to stand out when you hover, changing the background colors red.

Here’s what I tried.

HTML

[CODE]<nav>
<ul>

<li class=”special”><a href = “”>Log In</a></li>
<li><a href = “”>Our Projects</a></li>
<li><a href = “”>Contact</a></li>
<li class=”special”><a href = “”>Create a NEW Account</a></li>

</ul>
</nav>[/CODE]

CSS

[CODE]nav ul li.special:hover{

background-color: red;

}[/CODE]

But it doesn’t work, any help would be greatly appreciated!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Jul 29.2014 — Your exact code plugged into its own page (see below) works in Chrome, FF and IE11. You must have something else conflicting with that rule.

[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>li background</title>
<style>
nav ul li.special:hover {background-color: red;}
</style>
</head>
<body>
<nav>
<ul>

<li class="special"><a href = "">Log In</a></li>
<li><a href = "">Our Projects</a></li>
<li><a href = "">Contact</a></li>
<li class="special"><a href = "">Create a NEW Account</a></li>


</ul>
</nav>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@deathshadowJul 29.2014 — Some advice, style the anchors, NOT the LI. I usually set my LI to display:inline to prevent IE stagger effects and/or staircase (depending on how you're styling them) then set the anchors to display:block, display:inline-block or float depending on what I want to do with them, putting the background on the anchors.

then it would be:

nav ul li.special a

I'd also target :active and :focus so keyboard navigators aren't left out in the cold.

nav ul li.special a:active,
nav ul li.special a:focus,
nav ul li.special a:hover {
background:red;
}


[i]I'd probably also axe the stupid NAV tag, but that's because I think the new HTML 5 tags are pointless garbage code bloat redundancies that serve no legitimate purpose other than giving book sellers and scam artists a new sick buzzword to play with.[/i]
Copy linkTweet thisAlerts:
@PoxMoyauthorJul 31.2014 — Could it be this?

[CODE]nav li a {
padding: 15px 10px;
color: #fff;
text-decoration: none;
font-family: verdana;
}

nav li a:hover{

background-color:#1975FF;

}

nav ul li.special:hover{

background-color: red;


}[/CODE]

Could the first two code segments overide the last?
Copy linkTweet thisAlerts:
@deathshadowJul 31.2014 — That last one targets the LI which are the PARENT of the A... as such the A shows OVER the parent, so the last one will happen, but be hidden behind it.

Might also help if you had a proper font stack... and without setting the anchor to display:block, display:inline-block, or floated it won't obey top/bottom padding in anything other than quirks mode IE. (unless you declared that elsewhere)

nav li a {
display:block;
padding:15px 10px;
color:#FFF;
text-decoration:none;
font-family:verdana,helvetica,sans-serif;
}

nav li a:hover {
background-color:#1975FF;
}

nav ul li.special a:active,
nav ul li.special a:focus,
nav ul li.special a:hover {
background-color:red;
}

Is probably what you meant to do if that's a vertical menu.

nav li {
display:inline; /* do not attempt to do ANY other styling on these! */
}

nav li a {
display:inline-block;
padding:15px 10px;
color:#FFF;
text-decoration:none;
font-family:verdana,helvetica,sans-serif;
}

nav li a:hover {
background-color:#1975FF;
}

nav ul li.special a:active,
nav ul li.special a:focus,
nav ul li.special a:hover {
background-color:red;
}

For a horizontal menu. (or float instead of inline-block on the anchors if you want no gaps).

Though I'd probably be using "1em 0.66em" instead of pixels for padding, but that's because I try to avoid using pixel measurements whenever and wherever possible since PX is accessibility trash.
×

Success!

Help @PoxMoy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...