inline css not working for my li

Question

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

The answer doesn't change. You can't do it. You'll need to use different classes per LI or use javascript. — Richard, Oct 25 '13 at 17:36

jeffjenx · Answer 1 · 2013-10-25T17:38:15.070

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;  
}

Daniel Riemer · Accepted Answer · 2013-10-25T17:46:30.130

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…

score 1 · Answer 3 · answered Oct 25 '13 at 17:32

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;  
}

answered Oct 25 '13 at 17:32

Pastor Bones

7,183
3
36
56

modified my exact problem in question – Neo Oct 25 '13 at 17:36

score 0 · Answer 4 · answered Oct 25 '13 at 17:31

0

Inline css is the direct style for that DOM object.

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

answered Oct 25 '13 at 17:31

Naftali

144,921
39
244
303

what is the solution then :( – Neo Oct 25 '13 at 17:36
1

Use the stylesheet or do the inline css directly on the item you want to style. – Naftali Oct 25 '13 at 17:38

inline css not working for my li

4 Answers4