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, orIE=Edge(I've tried all 3). - I've tried marking all the items under the
:hoverto be!importantand 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]:hoverto[Selector] .hoverbecause 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.
#61CBFD22won't work, but#61CBFDwill. If you wanted to post an answer I can mark it as correct as your comment lead to the solution. Thanks!