Simple CSS label hover colour when hovered over! checked/not checked

[GrumpyYoungMan]

The 'pen

Basically when the mobile main menu is show/expanded (under 50em width) the close (red cross) doesn't change colour on hover, and I can not remember how to make it work, please help...

Many thanks, again....

[GrumpyYoungMan]

I thought it was something to do with the document flow and the CSS colour changes, but I tried different orders and it still will not change from the red... 

[coothead]

Hi there GrumpyYoungMan,

try it like this...

Code: [Select]

    #ctl_mainMenu:checked ~ nav label:hover:after,
    #ctl_mainMenu:checked ~ nav label:active:after {
        color:#0ff;
    }

coothead

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

try it like this...

Code: [Select]

    #ctl_mainMenu:checked ~ nav label:hover:after,
    #ctl_mainMenu:checked ~ nav label:active:after {
        color:#0ff;
    }

coothead

Thanks, I forgot the :active! :/

Should stick to the day job!

Thank you!!!

[coothead]

...you may also find that this modification...

Code: [Select]

#headliners {
    font-weight: bold;
    font-variant: inherit;
    font-style: inherit;
    font-size: 1.5em;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:0.5em;
    padding:0.5em;
    /*margin:1em;*/
}

...works a little bit better.

coothead

[GrumpyYoungMan]

...you may also find that this modification...

Code: [Select]

#headliners {
    font-weight: bold;
    font-variant: inherit;
    font-style: inherit;
    font-size: 1.5em;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:0.5em;
    padding:0.5em;
    /*margin:1em;*/
}

...works a little bit better.

coothead

Thank you for your help and assistance, I appreciate it!

The 'Pen has been updated with both the fixes you suggested!