I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. It only shows the hover state icon. Is there a way to use toggle class with fade or transition effects to slowly swap between the classes?
CSS:
.play{
height:30px;
width: 30px;
color: rgba(62, 173, 236,0.7);
bottom:0.2em;
left:46.7%;
position: absolute;
display: inline-block;
}
.play:before{
content: '\f04b';
font-family: "Font Awesome 5 Free";
font-size: 18px;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.pause{
display: inline-block;
height:30px;
width: 30px;
color: rgba(62, 173, 236,0.7);
bottom:.6em;
left:46.7%;
position: absolute;
}
.pause:before{
content: '\f28b';
font-family: "Font Awesome 5 Free";
font-size:27px;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
jQuery:
$('.platform_Slide').hover(function() {
$('.play').toggleClass('pause');
});