Here are both links side by side:
    <a class="Header_link"
       href="https://github.com/superflycss/component-header/">Github</a>

    <a class="Header_link"
       href="https://github.com/superflycss/utilities-colors/">Github</a>

If you delete the dash in 'utilities-colors' then the hover event will trigger on the second link as well.

The link in the original post doesn't repro for me on linux using Chrome 59.0.3071.115 . ole.ersoy@gmail.com can you please attach a minimised test case or link to a jsfiddle showing a minimised test case?

You mean you can't see this:
https://superflycss.github.io/utilities-colors/deploy/test/html/header.html

Thank you for providing more feedback. Adding requester "bugsnash@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

ole.ersoy@ that's correct, looking at https://superflycss.github.io/utilities-colors/deploy/test/html/header.html both links change to pink on hover for me on linux using Chrome 59.0.3071.115. The original post suggests that the bug is that the second link does not appear pink, but I cannot repro that.

I'm also not able to easily inspect the css source of the link you provided, so a minimised test case that you can reproduce (as well as screenshots of the issue) would help. Thank you :)

Thank you for providing more feedback. Adding requester "bugsnash@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

I attached two screenshots.  In the first one I'm hovering over the second link which does not render.  You can also check out the source code here:

git clone https://github.com/superflycss/component-header
npm i
npm run test

http-server -c-1

http://localhost:8080/target/test/html/

Not sure if it matters, but I'm running ubuntu 17.04.

It should be very easy to test this though.  The link:

<a class="Header_link"
       href="https://github.com/superflycss/utilities-colors/">Github</a>

Does not render the with the "utilities-colors/" string in the href.  If it works for you, then there must be something else in the context of the test that's causing it.  If you are able to clone the repository and run the test in your browser and it still does not reproduce, then it must be one of my plugins.

Was able to reproduce on Chrome 59.0.3071.115 (Official Build) (64-bit) if I clicked on one of the links and went back to the test page. Both links have this behaviour. I suspect this is because the :visited style uses the normal link color and not the :hover color?

Closing this issue as it does not appear to be a bug / cannot reproduce. Feel free to reopen this if what I said was incorrect.

In my case I do not need to click on either link.  The top link renders the hover event, but the bottom link does not.  However if I change the string in the bottom link to something else it renders.

Once I've visited both of the links, I can no longer get the pink colors. The .Header_link:visited rule has normal colors that overrides the pink :hover colors. If I disable the :visited rule, everything works fine.

Perhaps try opening the test page in incognito mode and see if it's still a problem.

Oh dang - you are right - incognito solves it - I'm doing everything incognito from now on!  Even the word is awesome!  

So IIUC I probably visited the page at some point, so even though it's opening in a new tab, Chrome is remembering that I visited that link and triggering the visited style on hover?

OK - Yeah that seems to be the case - Chrome remembers that you have visited pages, even though the page is opened in a new tab.  Nice observation.

Question - Should the hover event trigger and render the same color regardless of whether the link has been visited or not?  IIUC visited is the style that the link is rendered as after it has been visited, but not while something is hovering.  When we hover, the hover style should still apply, regardless of whether the link has been visited or not.

I believe it depends on the order that the :hover and :visited pseudoclasses are defined. See the test case I made at https://jsfiddle.net/cz0o5fxf/2/. Once the link is visited the hover rule no longer applies. If you move the :hover rules after the visited rules however, they will override and the hover rules will apply after the link is visited.

For what it's worth, minimised test cases like this often make it clear where the problem is, which is why they are so useful for bugs and why we will often request them :)

Great tip thanks!  Definitely going to go the jsfiddle route next time.  Or maybe plunker :).  I also asked on SO just now and that also confirmed it: https://stackoverflow.com/questions/44961751/should-the-hover-event-be-disabled-once-a-link-is-clicked

It still feels like a bug to me though.  I understand that the order matters, but I don't think it should.