I am trying to have 2 class both with a :before pyseduo. Once the target class is hovered the 2 class swap. works fine in safari but in other browsers the icon at the bottom does not show. It only shows the hover state icon. does the toggle class support fade or transition to swap the classes slowly?
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');
});