hover applied on <li>

[Hassine]

Hello,

I have a list <ul> composed of some <li>. I want to change the color of a <li> text when the mouse is on the hole <li>: in other words, when the mouse is on the correspondant text and on the empty space before and after the text. I tried to apply hover, but the text change it's colour just when the mouse is on the text. Here is an illustration of what hover shows as result (the arrows represent the mouse)

Help me please, thanks

 

[960design]

Please add a code snippet ( or better: jsfiddle ) so that we do not waste time guessing at your structure.

 

[NickiSibbern]

http://jsfiddle.net/yqeczd4f/

that should get you going

 

[4TheLoveOfMac]

Change Background of li element

Use this to change the background color:
background:#A5A5A5 !important;

 

[iPaintCode]

Here's adding in anchor tags, keep in mind use the anchor tag as the :hover won't change the color of the list-style-type icon list the above example. Though looking at your image you could use a custom image or use a pseudo element like a :before or :after (single colon for IE8 support).

http://jsfiddle.net/yqeczd4f/2/

Added in a transition just for kicks.