Não teve jeito, as setas do slider do projeto terão que ser em png.
Hoje estou fazendo assim (parte do código):
.banner_home_inferior .owl-next {
right: -6px;
background: url(/images/setas_novas.png) no-repeat !important;
background-position: -55px 0px !important;
height: 89px !important;
width: 48px !important;
display: inline-block !important;
margin-top: -44.5px !important;
top: 50% !important;
font-size: 0 !important;
}
.banner_home_inferior .owl-next:hover {
background: url(/images/setas_novas_hover.png) no-repeat !important;
background-position: -55px 0px !important;
}
Porém, ao passar o mouse pela primeira vez, tem um delay para trocar as imagens.
Existe alguma técnica de fazer uma imagem que exibe a parte superior e ao passar o mouse, exibe a parte inferior?