I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows).
However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% opacity and the text-shadows do not display correctly.
Strangely, everything works perfectly when I use a websafe color (such as white).
To demonstrate the problem and show that there is nothing wrong with my syntax, I have included a link to a jsfiddle: https://jsfiddle.net/TheInternetIO/Lxj12uje/3/ and here is the CSS code for the problematic case:
h2:hover{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: hsla(0, 0%, 0%, .2);
}
Can anyone explain why this is happening?