0
1.6K
Vistas¿Cómo cambio la propiedad css hover del botón Sweet Alert?
Quiero cambiar la propiedad :hover del botón de confirmación de alerta dulce. Escribí el siguiente código:
sweetAlert({ title: "<span style='color: #134563'>[My title]", text: "<span style='font-size: 20px'>[My Message.....]", imageUrl: "images/email-icon.png", allowOutsideClick: false, confirmButtonColor: "#134563", customClass: ".sweet-alert button:hover{ background:'#2b5c79'; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }", html: true });Pero no obtengo la propiedad :hover incluso con la personalización de clase. ¿Cómo puedo solucionar eso?
2 Respuestas
Responde la pregunta0
Actualizar
Debe definir customClass como esto: customClass: ".sweet-alert button" . Ahora puede definir los estilos en su hoja de estilo (css) como .sweet-alert button:hover{ background:'#2b5c79'; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } . Sé que el fragmento no funciona, solo tiene fines ilustrativos. Puede encontrar la documentación aquí o docu sweetalert2 (se dan ejemplos).
sweetAlert({ title: "<span style='color: #134563'>[My title]", text: "<span style='font-size: 20px'>[My Message.....]", imageUrl: "images/email-icon.png", allowOutsideClick: false, confirmButtonColor: "#134563", customClass: ".sweet-alert button", html: true }); .sweet-alert button:hover { background:'#2b5c79'; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }Respuesta antigua
Puedes probar esto. Agregue estos eventos a su botón, simula el evento flotante.
$(".myclass").mouseover(function() { $(this).css("background-color","red"); }).mouseout(function() { $(this).css("background-color","transparent"); }); .myclass { height: 50px; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myclass"></div>0
Puede usar jquery para apuntar al botón directamente:
$(".swal2-confirm.swal2-styled").on('mouseenter', function() {$(this).css('background', 'green')})resultado :
Para configurar el color al salir:
$(".swal2-confirm.swal2-styled").on('mouseleave', function() {$(this).css('background', 'blue')})