CSS's :hover selector works in Chrome but not IE

https://sharepoint.stackexchange.com/questions/258939

06-02-2021
|

Question

Solution: Appears that IE does not accept alpha values on hex colours: ie, #61CBFD22 doesn't register because the 22 is the alpha value. #61CBFD registers.

I'm trying to increase readability and navigation on our site with a little CSS on the global navigation (See below for CSS). It works flawlessly in Chrome, but in IE, none of the :hover selectors work.

The :hover selectors are just to add a highlight to the currently hovered item, to more easily see what element is selected.

Here's some stats on what's going on:

Using IE 11, version 11.590.17134.0, with the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge"/> at the top of the <head> of the master page.

It doesn't work with IE=10,IE=11, or IE=Edge (I've tried all 3).
I've tried marking all the items under the :hover to be !important and that doesn't work either so I don't think it's a precedence issue.
Tried making IE not run in compatibility mode for Intranets
Tried changing [Selector]:hover to [Selector] .hover because I noticed a Class change on hovered elements that reflect that change.

Not sure what else there is to try. I'm sure that :hover is valid in IE 11... Any help would be appreciated.

/*** Top Navigaion Static Menu Items ***/
.ms-core-listMenu-horizontalBox li.static {
    border: 1px solid transparent;
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
}

/*** Top Navigaion Static Menu Item Links  ***/
.ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item {
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 10px;
    padding-left: 20px;
    margin-right: 1px;
    color: #000;
}

/* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item:hover {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color: #61CBFD22;
    color: #000;
    text-decoration: none;
}

/*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    color: #000;
    text-decoration: none;
    border: 1px #134072 solid;
    padding: 10px 10px;
    margin: 1px;
}

/*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
    border: 1px solid #007;
    padding: 1px;
    margin-top: 5px;
    font-size: 1.1em;
    width: auto !important;
    white-space: nowrap;
}

/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
    padding: 0px 20px 0px 20px;
    white-space: nowrap;
    color: #000;
}

/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
    background-color: #61CBFD22;
    color: #000;
}

/** Hide "Edit Links" ***/
.ms-listMenu-editLink {
    display: none !important;
}

As per comments:

Emulation Tab in F12 console:

When checking the a: option in the f12 screen, and selecting :hover, there are no changes to the CSS being applied for most items. The actual a tag does change, and the background-color I used is underlined.

La solution

As per my comments, you can find out more information about what is happening by:

Opening the Emulation tab in the developer console to determine the version of IE
Opening the DOM Explorer tab and using the "a:" button to simulate the hover effect and pinpoint potentially overwritten or invalid styles

Additionally, and according to Can I use, Internet Explorer noes not support the CSS Color Module Level 4 which "defines new 4 & 8 character hex notation for color to include the opacity level".

Furthermore, I would suggest to upvote the entry, "#rrggbbaa and #rgba color notation support" in uservoice,

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/17366608