Is it just a quirk? of the HTML

[GrumpyYoungMan]

Thanks!

Be that as it may, GYM's code...

We must be looking at different code. I don't see that anywhere in his pens.

This one

CSS:

Code: [Select]

html,
body {
  margin: 0;
  padding: 0;

  background: #000;
  color: #fff;

  font: normal 1em/1.5 "Courier";
  box-sizing: border-box;

  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}

body > header {
  display: flex;
  justify-content: space-between;
}
h1 a {
  color: #6495ed;
}
h1 a small {
  display: block;
  font: normal 0.5em Helvetica;
  color: #b0e0e6;
}
h1 a:hover {
  color: #adff2f;
}

/*  Header - User Options   */
#userOptions-Main ul {
  display: flex;
  list-style: none inside none;
}
#userOptions-Main li:not(:last-child):after {
  content: "\2022";
  padding: 0.5em;
}
#userOptions-Main a {
  color: #f6714c;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body > footer {
  text-align: center;
  color: #9cc5a1;
  padding: 0.5em 0;
}

/*  Form - Login    */
#form_Login h2,
#form_Login h3 {
  text-align: center;
  padding: 0.5em 0;
}

#form_Login div:first-of-type {
  color: #ff6666;
  font: bold 1.25em Verdana;
  padding: 0.5em 0;
  text-align: center;
}
#form_Login fieldset {
  display: flex;
  border: none;
  flex-direction: row;
  flex-wrap: wrap;
}
#form_Login input {
  font: inherit;
}
#form_Login label:after {
  content: ":";
  display: inline-block;
}
#form_Login label {
  width: 20%;
  justify-content: center;
}
#form_Login input {
  width: 80%;
  padding: 0.5em 0.25em;
}

#form_Login label,
#form_Login input {
  margin: 1em 0;
}

#form_Login input:hover {
  background: #9cc5a1;
}
#form_Login input:focus {
  background: #4da87d;
}

#form_Login footer {
  text-align: center;
}
#form_Login footer button {
  border: none;
  background: none;
  font: bold 1em Verdana;
  color: inherit;
}
#form_Login footer button:hover {
  color: #759ab8;
}


[coothead]

We must be looking at different code.
I don't see that anywhere in his pens.

Further to  the information provided by GYM in post #15, the
code snippet  to which I referred may be found on line #35. 

coothead

[Jason Knight]

This one

Which you didn't link to anywhere in this thread until that post. That's:

YzrNjxY

When the ONLY link provided prior to that is:

oNGBPoQ

Are you guys discussing this on another forums or something? Deleted your own post under the time limit?

-- edit -- Oh wait, I see it, post #9, a three letter barely visible link. This is why I don't like it when people do that on forums. I always miss links when they're presented that way. When you say you "updated the pen" I assume it's the same URI. Otherwise you FORKED the pen. Like I did.

[coothead]

Are you guys discussing this on another forums or something?

You are joking, of  course. 

There are now only two coding forums left...

• https://www.codingforum.net/
• https://forums.cutcodedown.com/

...and you, GYM and yours truly are members. 

Putting that aside, do you have any further comments
to make regarding my post #10 and your post #11?

coothead

[GrumpyYoungMan]

Are you guys discussing this on another forums or something? Deleted your own post under the time limit?

No and not even in private anywhere!  I only post here to be honest, I like your no polish, tell it the way it is approach and I have always felt welcome.

...

a three letter barely visible link.

...

Sorry!

This one

Which you didn't link to anywhere in this thread until that post. That's:

YzrNjxY

When the ONLY link provided prior to that is:

oNGBPoQ

Are you guys discussing this on another forums or something? Deleted your own post under the time limit?

-- edit -- Oh wait, I see it, post #9, a three letter barely visible link. This is why I don't like it when people do that on forums. I always miss links when they're presented that way. When you say you "updated the pen" I assume it's the same URI. Otherwise you FORKED the pen. Like I did.

I am so sorry, I didn’t knowingly change the pen, I only updated it as far as I was aware, I didn’t know a ne one was created - when I said updated the pen I literally meant that, I didn’t mean I created a new one! Sorry for the confusion!

[Jason Knight]

I am so sorry, I didn’t knowingly change the pen, I only updated it as far as I was aware, I didn’t know a ne one was created - when I said updated the pen I literally meant that, I didn’t mean I created a new one! Sorry for the confusion!

Happens. Especially with codepen's garbage UI. I only use it now because it embeds so nicely into certain places like Medium and because others like it.

I don't like it one damned bit, which is why I still do all my dev and testing locally and only copy the results into CP when other want to see it. It's utterly useless trash for doing development or even basic testing inside.

But what do I know? I say the same thing about the mental masturbation that is Git.

[GrumpyYoungMan]

Happens. Especially with codepen's garbage UI. I only use it now because it embeds so nicely into certain places like Medium and because others like it.

I don't like it one damned bit, which is why I still do all my dev and testing locally and only copy the results into CP when other want to see it. It's utterly useless trash for doing development or even basic testing inside.

But what do I know? I say the same thing about the mental masturbation that is Git.

ALOT more than me, as I know nothing really!! Maybe I am a classic example of a little bit of knowledge is dangerous? I’ve never used GIT…

Anyway, have you got any ideas, you want to share on how I can sort my small and hover colours out? 🙏

Please and thank you!

[coothead]

have you got any ideas on how I can sort my small and hover colours out?

What , exactly are these requirements?

What color effect(s) do you require on hovering Demo Login?
What color effect(s) do you require on hovering Simple Login & Logout?

coothead

[GrumpyYoungMan]

have you got any ideas on how I can sort my small and hover colours out?

What , exactly are these requirements?

What color effect(s) do you require on hovering Demo Login?
What color effect(s) do you require on hovering Simple Login & Logout?

coothead

The hover needs to be green-yellow but it only affects the H1 and not the small - if I add the small:hover then that will change to the green-yellow but not the H1 text...

[coothead]

Full Page View
https://codepen.io/coothead/full/wvrdqrL

Editor View
https://codepen.io/coothead/pen/wvrdqrL

coothead

[Jason Knight]

Lose the span...

Code: [Select]

  <h1>
    <a href="?">
      Demo Login
      <small>Simple Login & Logout</small>
    </a>
  </h1>

Then set the hover on the anchor AND the anchor small.

Code: [Select]

h1 a:hover,
h1 a:hover small {
  color: #AF2;
}
If you want both to change. If you want them to change to different colours:

Code: [Select]

h1 a:hover {
  color: #AF2;
}

h1 a:hover small {
  color: #9E0;
}
Either way the interactive pseudostates -- hover, focus, etc -- should be done on focusable elements like anchor or button. Hover states on non-interactable elements is just asking for trouble in all but a few narrow cases like dropdown menus. (and even then that's a BAD idea)

Though the "new" -- if a decade can be called new -- ":focus-within" property has worked wonders for things like complex menus in terms of accessibility.

[coothead]

Lose the span...

Then set the hover on the anchor AND the anchor small.

Code: [Select]

h1 a:hover,
h1 a:hover small {
  color: #AF2;
}

I know, for some  unknown reason, you tend to ignore me,
but that is EXACTLY what I suggested in my post #10

Code: [Select]

h1 a:hover,
h1 a:hover small {
  color: #adff2f;
}

To which you, in your infinite wisdom,  replied in post #11 ...

WHY?  Small's default colour setting is inherit.
 There is no reason to set that.

Have you not considered the possibility that my use of
the span element was for a different hovering effect to
the one which you obviously assume GTM requires?

Will you reply to this post, well, on current form, i  most
certainly  won't be holding my breath.

coothead

[coothead]

Hi there GYM,

is this  green-yellow problem of yours now resolved?

coothead

[GrumpyYoungMan]

Hi there GYM,

is this  green-yellow problem of yours now resolved?

coothead

Yes, it did, thank you, although it’s not green-yellow now! 🤦🏽‍♂️😂

Sorry for causing the argument and the delay in responding!

[GrumpyYoungMan]

So, which method is the best practice? Is it inline-block or flex? or is it developer dependent?