Question

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

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

Answer 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类。

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

所以它有效;）

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

3 个答案: