.ui-dialog button.ui-button.ui-state-hover .ui-button-textcolor:black 到 jquery

Posted 2023-05-08

【中文标题】.ui-dialog button.ui-button.ui-state-hover .ui-button-textcolor:black 到 jquery

【英文标题】：.ui-dialog button.ui-button.ui-state-hover .ui-button-textcolor:black to jquery.ui-dialog button.ui-button.ui-state-hover .ui-button-textcolor:black 到 jquery

【发布时间】：2021-05-17 09:24:30

【问题描述】：

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

CSS 代码：

.ui-dialog button.ui-button.ui-state-hover .ui-button-textcolor: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，使用浏览器检查样式。可能必须做同样的事情，看看是否需要更多的课程。

【参考方案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/