0
1.6K
ViewsHow do I change css hover property of sweet Alert button?
I want to change the :hover property of the sweet alert confirm button. I wrote the following code:
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
});
But I don't get the :hover property even with the class customization. How can I solve that?
2 answers
Answer question0
Update
You need to define the customClass as this: customClass: ".sweet-alert button". Now you can define the styles in your stylesheet (css) as .sweet-alert button:hover{ background:'#2b5c79'; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }. I know the snippet does not work, it is for illustrative purposes only. You can find the documentation here or docu sweetalert2 (examples are given).
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;
}Old Answer
You can try this. Add These Events to your button, you simultate the hover Event.
$(".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
You can use jquery to target the button directly:
$(".swal2-confirm.swal2-styled").on('mouseenter', function() {$(this).css('background', 'green')})
Result:
To set the color when leaving:
$(".swal2-confirm.swal2-styled").on('mouseleave', function() {$(this).css('background', 'blue')})