-1

i tried like following to set a new background hover colorto my li tag but i'm failed to set

please guide me in syntax.

  <nav class="icons-example">
                        <ul>
                        <li><a href="#"><span class="font-icon-social-facebook" style=":hover a { background-color: blue;}"></span></a></li>
 <li><a href="#"><span class="font-icon-social-tweeter" style=":hover a { background-color: nevyblue;}"></span></a></li>
    </ul>
    </nav>

in css file

.icons-example ul li:hover a,
.icons-example ul li.active a {
background-color: red;  
}

i want to set blue color as hover please help me.

yes i can make change in css itself but i need to change color of each li separatly for example for facebook blue for tweeter navyblue.?

can any one give me exact css change for each li

Improve this question
5
  • updated my exact problem please comment @Richard Commented Oct 25, 2013 at 17:35
  • The answer doesn't change. You can't do it. You'll need to use different classes per LI or use javascript. Commented Oct 25, 2013 at 17:36
  • oh please can any one give me exact css change for each li Commented Oct 25, 2013 at 17:39
  • What stopping you from using jquery Commented Oct 25, 2013 at 17:40
  • 1
    if simple css trick can be helpful why to use jquery :) Commented Oct 25, 2013 at 17:56

4 Answers 4

Reset to default
3

That should do the trick:

.icons-example ul li:hover a,
.icons-example ul li.active a {
background-color: red;  
}

.icons-example ul li:hover a span.font-icon-social-facebook,
.icons-example ul li.active a span.font-icon-social-facebook {
background-color: blue;  
}

.icons-example ul li:hover a span.font-icon-social-twitter,
.icons-example ul li.active a span.font-icon-social-twitter {
background-color: navy;  
}

and so on…

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

The style attribute for HTML elements only supports CSS properties. It does not support CSS selectors.

In order to achieve different colors for each list item, you will need to target each one individually in your stylesheet. Something to the effect of:

.icons-example ul li:hover a,
.icons-example ul li.active a {
    background-color: red;  
}

.icons-example ul li:hover .font-icon-social-facebook
{
    background-color: blue;  
}

You may wish to add a class attribute of "facebook" to that element's LI, so you could do something like:

.icons-example ul li.facebook:hover a
{
    background-color: blue;  
}
Improve this answer

1 Comment

what is the solution then :(
1

Add the declaration to your stylesheet

.icons-example ul li.active a {
  background-color: red;  
}
.icons-example ul li.active a span:hover {
  background-color: blue;  
}
Improve this answer

1 Comment

modified my exact problem in question
0

Inline css is the direct style for that DOM object.

You cannot tell it style=":hover a { background-color: blue;}"

Improve this answer

2 Comments

what is the solution then :(
Use the stylesheet or do the inline css directly on the item you want to style.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.