如何更改甜蜜警报按钮的css悬停属性？

Question

我想更改甜蜜警报确认按钮的：hover属性。我写了以下代码：

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
        });

但即使是类自定义，我也没有得到：hover属性。我怎么解决这个问题？

Answer 1

您可以使用jquery直接定位按钮：

$(".swal2-confirm.swal2-styled").on('mouseenter', function() {$(this).css('background', 'green')})

结果：

离开时设置颜色：

$(".swal2-confirm.swal2-styled").on('mouseleave', function() {$(this).css('background', 'blue')})

Answer 2

更新

您需要将customClass定义为：customClass: ".sweet-alert button"。现在，您可以将样式表（css）中的样式定义为.sweet-alert button:hover{ background:'#2b5c79'; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }。我知道该代码段不起作用，仅用于说明目的。你可以找到documentation here或docu sweetalert2（给出的例子）。

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; 
}

---

老答案

你可以试试这个。将这些事件添加到您的按钮，您可以模拟悬停事件。

$(".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>