如何为jquery对话框按钮设置不同的悬停颜色答案

【问题标题】：How to style different hover colors for jquery dialog buttons如何为jquery对话框按钮设置不同的悬停颜色
【发布时间】：2009-12-09 14:05:03
【问题描述】：

我不会为我的 jquery 对话框按钮提供不同的悬停颜色。例如，当用户将鼠标悬停在“确定”按钮上时，悬停颜色将为蓝色，而当用户悬停在取消按钮上时，悬停颜色将为灰色。谁能告诉我该怎么做？

【问题讨论】：

我正在使用带有此代码的标准 jquery ui 对话框 $('#popup').dialog({ autoOpen: false, modal:true, bgiframe: true, title:'Management', buttons: { "删除客户端": function() { alert('哦不只是不要删除我:('); }, "Cancel": function() { $(this).dialog("close"); } } });

标签： jquery-ui

【解决方案1】：

$(document).ready(function() {
    $(":button").hover(function() {
        $(this).css('background', 'url(' / images / buttons / green_26.png ')');
    });
    $(":button").mouseout(function() {
        $(this).css('background', 'url(' / images / buttons / grey_26.png ')');
    });
});

【讨论】：

$(document).ready(function(){ $(".ui-dialog-buttonset").children(":button").hover( function () {$(this). css('背景','url('/images/buttons/green_26.png')');}); $(".ui-dialog-buttonset").children(":button").mouseout(函数( ) {$(this).css('background','url('/images/buttons/grey_26.png')');}); }); // 或者像这样..

【解决方案2】：

基本理论：使用一个或多个 css 类，您可以在鼠标移入时动态添加到 html 对象，并在鼠标移出时删除。您可以查看jQuery hover event 和一些有关如何使用work with attributes in jQuery 的示例来了解如何操作。

详细说明：我可以立即想到两种不同的方法来解决此问题，具体取决于您要在哪里做出“确定”/取消按钮“决定”。

为样式表添加两个不同的类，使用不同的背景颜色，并为每个元素添加一个类。这意味着您将需要两个非常相似的 jQuery 方法，但其中大部分可以被分解以避免重复。
在您的按钮上硬编码不同的类名（或使用按钮 id 或其他东西）并制作两个不同的 css 选择器，例如 .ok .hover { your style here } 和 .cancel .hover { your style here }。然后你只需要一个 jQuery 调用，它使用 jQuery 选择器点击两个按钮并添加/删除 hover 类。

【讨论】：

感谢您的回答，但我正在使用带有此代码的标准 jquery ui 对话框 $('#popup').dialog({ autoOpen: false, modal:true, bgiframe: true, title:'Management ', 按钮: { "Delete Client": function() { alert('哦不只是不要删除我:('); }, "Cancel": function() { $(this).dialog("close"); } } });

【解决方案3】：

你可以使用这个功能：

function changeButtonClass(buttonIndex, classes) {
 var selector = 'div[class^=ui-dialog-buttonpane] > button';
 var buttonConcerned;
 if (buttonIndex >= 0) {
  buttonIndex++;
  buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')');
 } else {
  return;
 }
 buttonConcerned.removeClass();
 buttonConcerned.addClass(classes[0]);
 buttonConcerned.
  hover(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[1])
   },
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[0])
  })
  .focus(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[2])
   })
  .blur(
   function() {
    $(this)
    .removeClass()
    .addClass(
    classes[0])
   });
}

然后用这个调用你的函数（对于 3 个按钮对话框）：

var classes = new Array('myClass', 'myClass2', 'myClass2');
changeButtonClass(0, classes);
var classes = new Array('myClass3', 'myClass4', 'myClass4');
changeButtonClass(1, classes);
changeButtonClass(2, classes);

所以它起作用了;)

【讨论】：