1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Changing link color on focus but not on click (either mouse or keyboard click)

Discussion in 'CSS' started by lizi, Aug 6, 2015.

  1. #1
    I want to change the color of a link when a user focuses on it by navigation to it using the TAB key. that's the easy part, as it's done by this:
    
    a:focus{ color: red;}
    Code (markup):
    the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.

    How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?

    I tried this:
    
    a:focus{ color: red;}
    a:active{ color: blue;}
    Code (markup):
    (blue is the default color) it didn't work, what happens is it first turned the link blue but then red in a slit second...

    I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.

    any suggestions ?
    SEMrush
     
    lizi, Aug 6, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Because when you click it with the mouse, it achieves :focus - your CSS is doing exactly what it's meant to do. If you want to NOT have this effect, only way to achieve it is via javascript.
     
    PoPSiCLe, Aug 6, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    TECHNICALLY:

    :active -- it's clicked on and either scripting or the browser is processing it.

    :focus -- it's been moved to by the keyboard

    :hover -- the mouse is over it.

    :visited -- you've followed it's href.

    BUT -- some legacy browsers use :active for both keyboard AND it's currently clicked, which is why it's good practice to just use :active, :hover and :focus TOGETHER for the same state / effect.

    Though what are you doing with it where it matters? Are you using it to intercept for scripttardery, or is it pointing to a link. If the latter it shouldn't be on screen long enough to matter, if the former, are you cancelling the event? Are you hooking with addEventListener and/or attachEvent, or are you using the stupid malfing "onevent" nonsense in the markup?

    Either way if it's an anchor and it staying in the :active state makes ANY difference, it's likely you're doing something wrong somewhere else.... Also, check your value for :visited -- you might be seeing that instead.
     
    deathshadow, Aug 6, 2015 IP