CSS's :hover selector works in Chrome but not IE
-
06-02-2021 - |
Pregunta
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
: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:
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.
Solución
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
Further reading,
https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba/27802062