hover applied on <li>

Discussion in 'Web Design and Development' started by Hassine, Feb 6, 2015.

  1. Hassine macrumors newbie

    Joined:
    Jan 23, 2015
    #1
    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 :)
     

    Attached Files:

    • 1.PNG
      1.PNG
      File size:
      2.9 KB
      Views:
      219
    • 2.PNG
      2.PNG
      File size:
      2 KB
      Views:
      206
  2. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    Please add a code snippet ( or better: jsfiddle ) so that we do not waste time guessing at your structure.
     
  3. 4TheLoveOfMac macrumors newbie

    Joined:
    Jan 14, 2015
    #4
    Change Background of li element

    Use this to change the background color:
    background:#A5A5A5 !important;
     
  4. iPaintCode macrumors regular

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #5
    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.
     

Share This Page