Nodejs.org: UI - Lines appear on top of the commit links on hover in the release notes

[thlorenz]

It's a minor issue, but I'm pretty sure you'd want to underline the link instead when I hover over it.

The below image shows the line when hovering over the first link.

Screenshot taken here: https://nodejs.org/en/blog/release/v4.3.1/

[Fishrock123]

Can confirm.

[hiroppy]

I think it is a difficult problem.
Because we can not attach class to this elements.(because it is unfolded in markdown by metalsmith)

I tried to use {: .fuga} but could not apply class selector in metalsmith;(

https://github.com/nodejs/nodejs.org/blob/master/layouts/css/base.styl#L32

[kahwee]

This does the trick:

a > code {
    padding: .25em;
}

It pads it as such where you cannot see the green background.

[hiroppy]

@kahwee I do not recommend it. Because it is not improved in IE11.

IE11 needs .32em.

[kahwee]

Good note. I didn't have IE to test on. This is one way too:

a[href*="/commit/"] {
    background: #f0f0f0;
}

[hiroppy]

nice :+1:
however I notice this page has same problem... :cry:
how do we resolve above?

[kahwee]

This doesn't scale well:

a[href*="/api/"], a[href*="/commit/"] {
    background-color: #f0f0f0;
}

What do you think?

[hiroppy]

I agree with your opinion. This code doesn't scale well.
The best is to attach a class but I think it difficult.
@fhemberger Do you have any thoughts?

[fhemberger]

This seems to work well (just a quick test):

a:hover code {
  background-color: transparent;
  color: #fff;
}

So the hover effect just looks the same as for regular links.

[lpinca]

Was playing with this last day and ended up with the same solution proposed by @fhemberger.
I think it's the simplest one, and it's consistent with other links.

[hiroppy]

I feel the same way.

[kahwee]

@fhemberger's solution looks good to me.