.ui-dialog button.ui-button.ui-state-hover .ui-button-text{color:black} 到 jquery答案

【问题标题】：.ui-dialog button.ui-button.ui-state-hover .ui-button-text{color:black} to jquery.ui-dialog button.ui-button.ui-state-hover .ui-button-text{color:black} 到 jquery
【发布时间】：2021-05-17 09:24:30
【问题描述】：

我整天都在尝试将CSS转换为jQuery，但没有成功。

CSS 代码：

.ui-dialog button.ui-button.ui-state-hover .ui-button-text{color:black}

我认为它可能是这样的。

jQuery :

$(".ui-dialog > button.ui-button.ui-state-hover > .ui-button-text").css('color','black');

但它不起作用。目标是在悬停按钮时更改 jquery-ui dialog 的按钮文本颜色。

任何帮助将不胜感激！非常感谢您！再见

【问题讨论】：

代码缩进 4 个空格
查看 jqueryui 对话框演示，他们的按钮比这有更多的嵌套，向下到 ui-buttonset，然后是 ui-widget，使用浏览器检查样式。可能必须做同样的事情，看看是否需要更多的课程。

标签： jquery css jquery-ui dialog

【解决方案1】：

这是一个基于jQuery 演示的演示：

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });

  $(".ui-dialog .ui-dialog-buttonset button").hover(function() {
    $(this).addClass("ui-state-highlight");
  }, function() {
    $(this).removeClass("ui-state-highlight");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

主题

对话框小部件使用 jQuery UI CSS 框架来设置其外观样式。如果需要特定于对话框的样式，则可以使用以下 CSS 类名称来覆盖或用作 classes 选项的键：

ui-dialog：对话框的外层容器。

ui-dialog-buttonset：按钮本身周围的容器。

上面的示例使用hover() 添加和删除可用于设置对话框内按钮样式的类。查看更多：https://api.jqueryui.com/dialog/

【讨论】：