如何更改甜蜜提醒按钮的 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 属性即使 class 自定义。我该如何解决？

Answer 1

更新

您需要将 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 or 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>

Answer 2

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

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

结果：

离开时设置颜色：

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

如何更改甜蜜提醒按钮的 css 悬停 属性？

How do I change css hover property of sweet Alert button?

css

jquery

sweetalert

如何更改甜蜜提醒按钮的 css 悬停属性？